Html 将父div内的div居中对齐

我的笔：

我想将所有div与黄色边框居中对齐，我该怎么做

我试过边际：0自动；在父容器上，但这没有帮助

带有黄色边框的“项目”应保持其百分比宽度。不要将其更改为固定像素值

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>

---

要使四个div居中，请将其设置为

.cellContainer{
浮动：无；
显示：内联块；
}

并将导航栏内容居中

#导航栏{
文本对齐：居中；
}

带有更正的css

.cellContainer{
保证金：0自动；
宽度：20%；
/*浮动：左*/
背景：黑色；
显示：内联块；
}
#导航栏{
文本对齐：居中；
}

检查此项，为每个分区保留4个垫片。这可以通过添加

左边距：-4个来固定

on

.cellContainer

@feela我以为text align:center只对齐divs中文本之类的内容？@msfanboy这取决于display属性，而不是所使用的标记…

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;
}