html - 居中对齐父 div 内的 div

Question

我的笔: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;
}

Answer 1

要使四个 DIV 居中，请将它们设置为

.cellContainer {
    float: none;
    display: inline-block;
}

并使导航栏内容居中

#navBar {
    text-align: center;
}