`

div居中对齐

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中对齐Div</title>
</head>

<style>
    body{  text-align:center;}
 #outer{ 
      margin: auto;
   width:60%;
      background:#ffffcc;
   text-align:center;
    }
 .inner{
     width:790px;
  height:300px;
  margin:5px;
  border:1px solid #000;
 }
* html .inner {display:inline}/* for ie*/
html>body #outer {display:table}/*for mozilla */
html>body .inner {display:table;float:left}/*for mozilla */
@media all and (min-width: 0px){/* opera 7 styles */
html>body .inner {display:inline-block;float:none;}
}
</style>
<body>
   <div id="outer">
      <div  class="inner">
      <table width="100%">
       <tr>
       <td width="20%">编号</td>
    <td align="left">1111111111</td>
    </tr>
    <tr>
       <td width="10%">邮箱地址</td>
       <td align="left">2222222222</td>
    </tr>
    <tr>
       <td width="10%">信息中心</td>
       <td align="left">3333333333</td>
    </tr>
    <tr>
       <td width="10%">电邮</td>
       <td align="left">44444444444</td>
    </tr>
   </table>
   </div>
   </div>

</body>
</html>

分享到:
评论

相关推荐

    css实现文本和div居中对齐详细讲解示例

    主要介绍了css实现文本和div居中对齐详细讲解示例,需要的朋友可以参考下

    div中子div在firefox ie 水平居中对齐

    比如: &lt;div&gt; &lt;div&gt; &lt;/div&gt; &lt;/div&gt; 想让子div在父div中水平居中对齐,如果在css中写 div { text-align: center; }的话在ie中浏览没有问题,但在firefox中依然左对齐。 所以必须再加一个样式 div div { margin-left:...

    div中套用div的文本上下左右居中的css

    css:可以令层中层上下左右居中。(即:div之中的div的文本,上下左右居中显示)

    css中position:fixed实现div居中上下左右居中

    实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看

    div中多行文字垂直居中

    div中多行文字垂直居中

    将一个绝对定位的div水平垂直居中对齐

    在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现。 代码示例如下:...

    谷歌浏览器 div 水平对齐

    ie 火狐兼容而谷歌浏览器不兼容,div水平对齐的解决方式,仅供参考

    DIV和SPAN垂直居中对齐的实现方法

    水平居中很简单,设置text-align:center就可以了,但是垂直居中一直都不得其解! 以前总是尝试着调padding-top,但是有的时候好使,更多的时候不行...于是,DIV和SPAN中的文字垂直居中对齐了! 后来在百度里面一搜,耐

    用CSS让按钮居中显示的思路及代码

    就是做到类似于下图这种效果 通过简单的Css样式就可以... 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不

    垂直居中对齐的CSS示例代码

    垂直居中对齐的核心代码如下: 复制代码代码如下: .elment{ position:relative; top:50%; transform:translateY(-50%); } 具体参见如下案例,利用less将居中对齐的代码携程mixins。 html 复制代码代码如下: &lt;div...

    css遮罩全屏居中对齐的实现方式

    本文通过实例代码给大家介绍了css遮罩全屏居中对齐的实现方式,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

    在 CSS 中使 Div 居中的 3 种不同方法

    结论 在本文中,我们介绍了使一个元素在另一个元素中居中的三种不同方法,包括使用marginand padding、positionandtransform以及 flexbox/grid 布局。...有六种不同的对齐属性可用,每个属性都有不同的用途。

    网页设计-页面布局篇(Css+Div)

    网页设计-页面布局篇(Css+Div),网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).

    CSS让图片垂直居中和底端对齐的代码

    本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。CSS使图片垂直居中的代码:&lt;!DOCTYPE ...

    DIV水平垂直居中css实现代码

    主要代码: position:absolute; top:50%; left:50%; margin-top:-(height/2); margin-left:-(width/2) &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;...

    让Div层上下左右都居中的方法

    让Div层上下左右都居中的方法! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

Global site tag (gtag.js) - Google Analytics