这里有一个"简单"的问题,不确定为什么会这么复杂.
有任何想法吗?:)
geo*_*wa4 55
.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }
Run Code Online (Sandbox Code Playgroud)
Kha*_*yar 20
有关详细信息,让我们说下面的代码将使div对齐中心:
margin-left: auto;
margin-right: auto;
Run Code Online (Sandbox Code Playgroud)
或者只是使用:
margin: 0 auto;
Run Code Online (Sandbox Code Playgroud)
但请记住,只有在html元素上指定固定宽度(不是100%)时,上述CSS代码才有效.所以问题的完整解决方案是:
.your-inner-div {
margin: 0 auto;
width: 900px;
}
Run Code Online (Sandbox Code Playgroud)
关键是保证金:0自动; 在内部div.概念验证示例:
<!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" xml:lang="en" lang="en">
<body>
<div style="background-color: blue; width: 100%;">
<div style="background-color: yellow; width: 940px; margin: 0 auto;">
Test
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
小智 5
.outerdiv {
margin-left: auto;
margin-right: auto;
display: table;
}
Run Code Online (Sandbox Code Playgroud)
在 Internet Explorer 7 中不起作用……但谁在乎呢?