Question

我需要将内容居中，但如果我没有设置宽度则无法正常工作。我想设置宽度，但问题是在较大的显示器上运行正常但是当我在较小的显示器上尝试时，左列顶部和它下面的中间列和右列相同的东西。那么如何使用margin:0 auto居中但不指定宽度？

<div class="mainwrap">
<div class="left"></div>
<div class="centerContent"></div>
<div class="right"></div>
</div>

和css

.mainwrap{

 margin:0 auto;
 }   
.left{
vertical-align:top;

 display:inline-block;
 margin-left:30px;

 width:250px;

 }
.centerContent{
padding-top:20px;
display:inline-block;
 width:800px;
 margin:0px;
 background-color:#F7F7F7;
 border:1px solid #C0C0C0;

  }
.right{

display:inline-block;
vertical-align:top;
background-color:blue;
width:200px;

}

Answer 1

你可以在父div上使用display: table;来做。您需要浮动项目以获得他们想要的方式

DEMO http://jsfiddle.net/kevinPHPkevin/jPLUK/

一般例子

DEMO http://jsfiddle.net/kevinPHPkevin/jPLUK/1/

Answer 2

尝试添加

 text-align:center;

到wrap

你也可以考虑将宽度设置为％，这样无论屏幕分辨率如何都会缩放

Answer 3

您正在使用.right类两次，可能是问题所在，请尝试使用此代码。

<div class="mainwrap">
<div class="left"></div>
<div class="centerContent"></div>
<div class="right"></div>
</div>

将内容对齐到中心而不使用宽度

3 个答案: