如何使div中心在HTML中对齐

Mac*_*lor 67 html css

可能重复:
如何水平居中div?

使用HTML中心对象的一种简单方法是使用 align='center',但它不适用于div.

我试过了:

style='text-align:center';
style='left:50%';
Run Code Online (Sandbox Code Playgroud)

我甚至是真正的中心标签

<center>
Run Code Online (Sandbox Code Playgroud)

但我不能让我的目标div成为中心.

Tow*_*wer 48

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

在IE,Firefox,Chrome,Safari和Opera中经过测试和使用.我没有测试IE6.IE需要外部text-align.当您给DIV边距(左和右)值auto时,其他浏览器(和IE9?)将起作用.保证金"0 auto"是保证金"0 auto 0 auto"(右上角左下角)的简写.

注意:文本也在内部DIV内部居中,如果您希望它保留在左侧,只需指定text-align:left; 对于内在的DIV.

编辑:在标准模式下运行的IE 6,7,8和9将使用设置为自动的边距.

  • @thecoshman:课程和书籍用于教学.Stack Overflow用于解答. (3认同)
  • @Mac:这种技术适用于百分比宽度.但是,一般来说,为了使自动边距起作用,您必须处于标准模式,您需要一个适当的`<!DOCTYPE`声明.父文本对齐中心解决方法适用于Quirks模式,但您绝对不希望今天在Quirks模式下编写任何内容. (2认同)
  • 你需要用另一个div包装你的div,并将外部div的样式设置为IE的文本对齐 (2认同)
  • 只写一个解决方案并不能帮助人们学习.你应该尝试教导而不是快速摆脱人. (2认同)

the*_*man 11

我认为align="center"对齐内容,所以如果你想使用那个方法,你需要在'wraper'div中使用它 - 一个只包装其余部分的div.

text-align 正在做类似的事情.

left:50% 除非您将div的位置设置为相对或绝对位置,否则将被忽略.

通常接受的方法是使用以下属性

width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;
Run Code Online (Sandbox Code Playgroud)

边距为自动意味着它们增长/缩小以匹配浏览器窗口(或父div)

UPDATE

感谢Meo将此问题解决了,如果你想要,你可以节省时间并使用短手的利润来获得保证金.

margin:0 auto;
Run Code Online (Sandbox Code Playgroud)

这将顶部和底部定义为0(因为它是零,它与缺少单位无关),左边和右边定义为'auto'然后你可以,如果你不想覆盖说顶部边距就像你想的那样与任何其他CSS规则.