2

私のペン: 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;
}
4

2 に答える 2

0

cssを修正したデモリンク

.cellContainer {
    margin:0 auto;
    width: 20%;
    /*float: left;*/
    background:black;
    display: inline-block;
}
#navBar{
    text-align: center;
}
于 2013-07-11T07:35:57.853 に答える