可能重复:
如何水平居中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将使用设置为自动的边距.
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规则.