如何将<div>居中？

Question

可能重复:
如何在DIV中居DIV？

我想集中一个<div>(我是HTML5的新手而且<center>标签已不复存在),并且无论如何都要避免使用表格.<div>到目前为止,这是我作为CSS的问题:

#roundedcorner {
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-image: url(file:///Macintosh%20HD/Users/julesmazur/Desktop/TAN3.0/Photos/bodydivbg.png);
    width: 960px;
    left: 50%;
    font-family: Ubuntu;
}

(对于任何好奇的人,Ubuntu都是Google Web Fonts提供的).

Answer 1

典型的伎俩是margin: auto.它将它集中在它所处的内容中.

演示

除此之外,我对你的代码有一些评论(因为你是初学者).

• left: 50%;除非你改变位置风格,否则什么都不做,例如, position: relative;或position: absolute;
• 容器中的容器div需要比它大 - 否则它居中并不意味着什么.这是因为样式margin: auto相对于父容器,即它需要空间.
• 对于Google网络字体,请确保@font-face使用它.另外,使用替代品.并非所有浏览器都支持Web字体,并且您拥有的控制越多:越好.一个例子是font-family: Ubuntu, Arial, Sans;,从最喜欢的备份到最可能的备份.

Answer 2

不要用left.这将在左侧的页面中创建一个瞎扯.相反,使用margin: 0 auto.

<div style="margin:0 auto;width:960px">I'm centered.</div>