Question

我想简单地将2个div水平居中，无论屏幕宽度如何，也不使用包装器。我有以下简单的代码：

#div1 {
     display: inline-block;
     width: 100px;
     border: 1px solid #000000;
}
#div2 {
     display: inline-block;
     width: 200px;
     border: 1px solid #000000;
}

我创建了以下小提琴，用于说明： http://jsfiddle.net/axe89/

我不想使用包装器的原因是我想创建一个跨平台的网站，如果我为包装器定义宽度，它将打破移动屏幕。

Answer 1

如setek所提到的，你可以为你的div定义一个容器，宽度为100％，以便它随着屏幕/设备宽度而缩放。同时将其文本对齐到中心以获得所需的效果。

#container{text-align:center;width:100%;}

这是您的updated fiddle

并略微修改了标记和css - http://jsfiddle.net/axe89/5/

Answer 2

@setek有上面的解决方案，只是想添加这个快速的经验法则：

要横向居中display:inline和display:inline-block个项目，请使用text-align:center;。

要横向居中display:block个项目，请使用margin: 0 auto;。

Answer 3

使用css边距属性。

margin-left:40%

到第一个div。

Answer 4

您可以添加

text-align: center;

到body标签或你计划用div包装的任何内容。

fiddle link

中心2水平分割而没有包装

4 个答案: