Question

我目前使用这种方式使用表和CSS来中心div：

<table width="69" border="0" align="center">
  <tr>
    <td width="59">
      <div style="position:relative;">
        <div style="position:absolute; text-align:left; top: 100px;">div2 content goes here</div>
        <div style="position:absolute;text-align:left;">div content goes here</div>
      </div>
    </td>
  </tr>
</table>

以下是示例：http://2slick.com/div_center.html

请注意，扩展浏览器不会改变div的居中。有没有人知道使用CSS和更少代码做类似事情的方法？

Answer 1

给div一个固定的宽度，并将左右边距设置为自动。

.centeredDiv {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

Answer 2

常用方法是不使用表格，在其样式中设置div margin:0 auto。

Answer 3

除非您正在显示数据，否则在尝试定位时使用表格并不是最佳选择。如果您正在尝试使用中心布局页面设计，请查看以下内容：http://simplebits.com/notebook/2004/09/08/centering/

Answer 4

margin:auto

应该在居中的div上做伎俩。要非常仔细地重新创建您的示例：

<div style="width:100px; margin:auto">
    <div style="width:100px;">div content goes here</div>
    <div style="width:100px;">div2 content goes here</div>
</div>

然后，您可以根据需要添加填充，文本对齐等。也可以很好地获取内联样式，但是内联的示例很方便。

Answer 5

只需设置自动边距。看这个页面： http://www.bluerobot.com/web/css/center1.html

Answer 6

这里......

CSS：

body {
    text-align: center;
    }
div {
    width: 59px;
    margin: auto;
    text-align: left;
    }

HTML：

<div>I'm a div!</div>
<div>So am I!</div>

你如何使用CSS中心div

6 个答案: