私のペン: http://codepen.io/helloworld/pen/IGsoe
すべての div を黄色の境界線で中央揃えにしたいのですが、どうすればよいですか?
margin:0 auto; を試しました。親コンテナにありましたが、それは役に立ちませんでした。
黄色の境界線を持つ「アイテム」は、パーセンテージ幅を維持する必要があります。これを固定ピクセル値に変更しないでください。
HTML コード:
<div class="table">
<div id="navigationWrapper">
<div class="table">
<div id="left"><image width="40px" /></div>
<div id="navBar" style="width:100%; height: 100px; background-color: grey;">
<div class="cellContainer">
<div class="alarmTemplate">A</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">B</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">C</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">D</div>
</div>
</div>
<div id="right"><image width="40px" /></div>
</div>
</div>
<div id="navigationWheeler">test</div>
</div>
CSS:
body {
padding: 0;
margin: 0;
width:100%;
height:100%;
}
.cellContainer {
margin:0 auto;
width: 20%;
float: left;
background:black;
}
.alarmTemplate{
height:80px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
background:lightgray;
border:yellow solid 2px;
}
#navBar, #right, #left, #navigationWheeler {
height:80px;
background:yellow;
display:table-cell;
vertical-align:middle;
}
.table {
display:table;
min-width:100%;
margin:0 auto;
}
#right, #left, #navigationWheeler {
width:40px;
}
#navigationWheeler{
background:green;
text-align:center;
}