引导“中心块”

Question

我正在使用 bootstrap 制作如下 UI：

------------------------------------------------ | | | div 外 | | ---------------------------------------- | | | | | | | | | | | div 内 | | | | | | | | | | | ---------------------------------------- | | | | | --------------------------------------------------

代码是：

   <div id="app-layout-body" class="container-fluid body-content">
     <div id="div-register" class="center-block"     style="width:350px;margin-top:80px;">
      ....
    </div>
   </div>

为了使内部 div 在外部 div 居中，我使用了 class="center-block"。如果屏幕比特定数字宽，例如 1000px，则效果很好，但如果屏幕宽度不够大，则内部 div 将与外部 div 右侧相邻：

-------------------------------------- | | | div 外 | | ---------------------------------------- | | | | | | | | | |离开 | div 内 | | |边距 | | | | | | | | ---------------------------------------- | | | | | -----------------------------------------

用Chrome的开发者工具发现，当内层div不居中时，左边距会是一个固定的数字（好像有下界）。但是当屏幕的宽度在边界值之上变化时，左边距数会根据宽度而变化，从而使内部 div 始终居中。实际上，当inner div没有水平居中的时候，如果我手动调整左边距数字，那么inner div就会居中。

Answer 1

您的示例正在运行。问题是如果屏幕宽度小于小于 350px，布局将不起作用，因为您选择了 fixed width。

Demo

如果<div> 应该始终居中，请使用cols 和offset：

<div id="app-layout-body" class="container-fluid body-content">
    <div class="row">
        <div id="div-register" class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
            center with offset
        </div>
    </div>
</div>

Example offset

更多关于Bootstrap's grid offsetting的信息。

Answer 2

Bootstrap 的 .center-block 仅包含

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

应该有其他东西在您的容器中添加一些其他规则。在 Inspector 中，尝试检查您所说的 CSS（固定左边距）是从哪个文件添加的。

Answer 3

我认为这就是你想要做的。

#app-layout-body {
  height: auto;
  margin: 0 auto;
  padding: 25px;
  position: relative;
  border: 5px solid red;
  text-align: center;
}
#div-register {
  border: 5px solid green;
  padding: 10px;
  background: red;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div id="app-layout-body">
    <div id="div-register"><strong>I'm a centered Div inside another centered Div..</strong>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
        up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
        Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
        line in section 1.10.32.</p>
    </div>
  </div>
</div>