コンテンツを中央に配置する必要がありますが、幅を設定しないと機能しません。幅を設定したいのですが、大きなモニターでは問題なく動作しますが、小さなモニターで試してみると、左の列が上になり、中央の列がその下になり、同じことが右の列になります。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;
}