Question

我的笔：http://codepen.io/helloworld/pen/IGsoe

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

我试过保证金：0自动;在父容器上，但没有帮助。

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

HTML code：

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

Answer 2

Demo Link并更正了css

.cellContainer {
    margin:0 auto;
    width: 20%;
    /*float: left;*/
    background:black;
    display: inline-block;
}
#navBar{
    text-align: center;
}

中心对齐父div中的div

2 个答案: