Question

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

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

这是我的代码示例： 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

Source没有对代码的解释，所以

.row-fluid 类具有text-align:center属性，使其内容居中。

在 div.bottom 下，我有display:inline-block属性，这是其父级text-align属性必需的属性; float:none会覆盖默认的float:left，text-align:left会修复将图像放在列div中的中心位置，因为元素有一些填充。

引导网格中的中心行内容

1 个答案: