bootstrap 网格中的居中行内容

Question

我知道这个问题已经被问了很多，但每个问题似乎都有点独特，我在 Whosebug 上尝试了至少 7 个不同的版本并且 none 都有效。

这应该是一个简单的修复，但我无法将 div 内容居中。我需要所有行都以网格为中心，并在一直缩小到移动视图时居中。

这是我的代码示例： http://codepen.io/anon/pen/aOBJEv

这里是 html:

<div class="row-fluid">
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">

    <div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
    <div class="topic text-center">cheese </div>
  </div>
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">

    <div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
    <div class="topic text-center">Cool Beans </div>
  </div>
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">

    <div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
    <div class="topic text-center">I am happy </div>
  </div>
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">

    <div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
    <div class="topic text-center">Hello world! </div>
  </div>
</div>

Answer 1

我已将 .row-fluid{...} 和 div.bottom{...} 代码块添加到您现有的 CSS。

.row-fluid {
  text-align: center;
}
div.bottom {
  display: inline-block;
  float: none;
  text-align: left;
}

.top {
  position: absolute;
  top: -5px;
  left: 0px;
}
.topic {} .bottom {
  position: relative;
  top: 0px;
  left: 0px;
  margin-bottom: 25px;
  max-width: 275px;
  min-width: 277px;
}
.img-btm {
  height: 233px;
  width: 228px;
  -webkit-border-radius: 233px;
  -moz-border-radius: 233px;
  border-radius: 233px;
}
.bottom .text-center {
  max-width: 275px;
  min-width: 277px;
  position: absolute;
  left: -10px;
  top: 18px;
  font-size: 18px;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="row-fluid">
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">

    <div class="top">
      <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
    </div>
    <div class="topic text-center">cheese</div>
  </div>
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">

    <div class="top">
      <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
    </div>
    <div class="topic text-center">Cool Beans</div>
  </div>
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">

    <div class="top">
      <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
    </div>
    <div class="topic text-center">I am happy</div>
  </div>
  <div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">

    <div class="top">
      <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
    </div>
    <div class="topic text-center">Hello world!</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

来源: Bootstrap 3 responsive centered columns

源代码没有解释，所以

class .row-fluid 有一个 text-align:center 属性使其内容居中。

在 div.bottom 下，我有 display:inline-block 属性，这是其父文本对齐属性工作所必需的; float:none 覆盖默认值 float:left 并且 text-align:left 是对图像在列 div 内居中定位的修复，因为元素有一些填充。

bootstrap 网格中的居中行内容

center row content in bootstrap grid

css

fluid-layout

twitter-bootstrap