`

div居中对齐

IEHTMLOperaXHTML 
阅读更多

<!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>

分享到：
| 我的Ext Grid例子一
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    以上方法覆盖了不同情况下的文本和div居中对齐需求。在实际应用中，根据具体场景选择合适的方法，确保在各种浏览器中都能正常显示。同时，要注意兼容性问题，尤其是针对老版本的浏览器，可能需要添加特定的前缀或...

    DIV+CSS DIV居中布局

    CSS Grid布局也支持居中对齐。在网格容器上设置`align-items: center;`和`justify-content: center;`可以实现双向居中。例如： ```css .container { display: grid; align-items: center; justify-content: ...

    div居中div居中的8种方法

    标题提到的“div居中div居中的8种方法”是网页开发中的基础技巧，适用于不同场景。以下将详细解释这8种方法，并提供相关的应用示例。 1. **CSS Flexbox居中** CSS3的Flexbox模型提供了非常方便的居中方式。在父...

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

    在本例中，我们讨论的是如何使一个内嵌的`&lt;div&gt;`元素在它的父`&lt;div&gt;`中水平居中对齐，同时兼容Firefox和Internet Explorer（IE）浏览器。这个问题涉及到CSS的布局特性，主要包括`text-align`属性和自动外边距（`...

    div层居中代码下载

    上述代码将页面中的文本内容设置为居中对齐，当某个`&lt;div&gt;`的宽度小于其父元素时，该`&lt;div&gt;`会自动居中显示。但这种方式只适用于文本内容居中，对于非块级元素（例如图片或按钮等）并不适用。 **对于特定`&lt;div&gt;`的...

    DreamWeaver文字怎么居中对齐? dw垂直居中对齐的技巧

    在DreamWeaver中实现文字居中对齐，主要涉及到两个CSS属性：text-align和line-height。text-align属性用于控制文字的水平对齐方式，而line-height属性则控制文字的垂直位置。 1. 水平居中对齐技巧 在DreamWeaver中...

    css左右居中对齐

    "css左右居中对齐"是一个常见的需求，尤其是在构建响应式网站或设计用户界面时。本文将深入探讨如何使用CSS实现元素的水平居中对齐，并结合`test.html`文件中的示例进行说明。 首先，我们要理解CSS中的几种主要布局...

    Jsp中如何让图片在div中居中

    当涉及到在div中居中一张图片时，CSS是实现这一目标的主要工具。图片在HTML中的默认对齐方式取决于其父元素的样式设置。通常情况下，图片本身并不会继承display属性。然而，当图片作为某个元素的子元素时，可以通过...

    div中多行文字垂直居中

    这样，所有子元素（包括多行文本）都会沿着交叉轴（默认是垂直方向）居中对齐。 ```css .parent { display: flex; align-items: center; } ``` 2. **Grid布局** CSS Grid布局提供了一个二维网格系统，同样...

    div+css实现div的多层重叠，并且居中显示

    我们在制作网页时，有时需要多重div的重叠，每个div添加不同的内容，以实现特殊的层叠效果，这个如何实现，在网上没找到现成的详细的教程，但是可以用现有的知识，自己摸索哦。终于成功了，O(∩_∩)O~ 分享出来。...

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

    css：可以令层中层上下左右居中。（即：div之中的div的文本，上下左右居中显示）

    谷歌浏览器 div 水平对齐

    "谷歌浏览器 div 水平对齐"的问题主要涉及到跨浏览器的兼容性，尤其是 Internet Explorer (IE) 和 Mozilla Firefox 与 Google Chrome 之间的差异。下面将详细讨论如何解决这个问题，并提供两种可行的解决方案。 ...

    vue组件实现文字居中对齐的方法

    Vue 组件实现文字居中对齐的方法 在 Vue 中实现文字居中对齐的方法是一个常见的需求，本文将详细介绍如何使用 Vue 组件实现文字居中对齐的方法。 首先，我们需要编写 CSS 代码来实现文字居中对齐的效果。下面是...

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

    在CSS布局技术中，使DIV元素在浏览器窗口中上下左右居中是一个常见的需求。通过使用CSS的定位属性，我们可以通过多种方法来实现这一效果。本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 ...

    div+css垂直居中和水平居中

    `属性可以轻松地将文本内容在div内居中对齐。例如： ```css .container { text-align: center; } ``` 2. **多行文本水平居中**： 对于多行文本，`display: flex;`和`justify-content: center;`组合可以实现...

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

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

    DIV完全居中

    CSS Grid布局提供了一个二维网格系统，也支持元素的居中对齐。对于`div`元素的居中，可以设置如下样式： ```css .container { display: grid; place-items: center; /* 同时水平和垂直居中 */ } ``` 3. **使用...

    div居中-divjuzhong-master.zip

    在前端开发中，"div居中" 是一个常见的布局需求，尤其在构建网页时，我们需要让div元素在页面上水平或垂直居中显示。这里，我们主要探讨如何使用CSS（层叠样式表）来实现这一目标，同时也会涉及到HTML的基本结构。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics