Question

我对列的内容存在问题。这是布局的一部分：

<div class="tab-pane fade" id="AccountState">
   <div class="col-md-12">
      <div class="center-block" id="mainDiv" style="overflow:auto">
         <div class="stateItem" id="AlarmBurglary">
            <p class="stateText" data-localize="_Burglary">_Burglary</p>
            <img id="stateImg" src="img/ball_red48.png" alt="stateImg" />
         </div>
         <div class="stateItem" id="AlarmPanic">
            <p class="stateText" data-localize="_Panic">_Panic</p>
            <img id="Img1" src="img/ball_red48.png" alt="stateImg" />
         </div>
         ....
      </div>
  <div>
</div>

我的问题是我无法将这些'stateItem'div放在这个mainDiv中。如你所见，我尝试了中央区块，但物品仍保持左对齐。

类stateItem，stateText和stateImg没有任何关于定位的样式 - 只有宽度，高度和填充。

Answer 1

要将其显示类型为block的任何容器居中，因为它们会填充所有可用的水平空间，您必须为其指定宽度，然后使用auto设置其边距。请参阅代码段：

div {
  background: tomato;
  padding: 15px;
}
.centered {
  background: #FFF;
  width: 50%;
  margin: auto;
}

<div>
  <div class="centered">
    Centered DIV
  </div>
</div>

bootstrap列中的中心内容

1 个答案: