Question

我正在尝试完成一个项目，我需要将图像和它下面的文本放在中心。我尝试了所有的东西，从中心块，只是试图改变col-md-x。但是我找不到一个好的解决方案，我觉得有一个col-md-8和col-md-4隐藏在某个地方。你可以猜到我正在努力学习bootstrap，我是一个完整的新手。这是the link。

<div class="thumbnail">
     <img src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">

   <div class="caption text-center">
     <blockquote><em> Some more text </em></blockquote>
   </div>
 </div>
   <div class="row">
     <div class="col-md-4"></div>
   <div class="col-md-4 col-md-offset-4">
     <h2> Title </h2>
     </div>

由于

Answer 1

添加center-block之类的CSS规则：

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

这是bootstrap 3.3.7中的CSS规则：（REF center-block.less）

但似乎他们将其移除v4，现在他们在v4中使用mx-auto :( REF LINK HERE）

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

Codepen：https://codepen.io/hdl881127/pen/YVozxo

body {
  margin-top: 50px;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-12">

        <h1 class="text-center text-primary"> Title </h1>
        <h2 class="text-center"> Some text </h2>

        <div class="thumbnail">
          <img class="center-block" src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">

          <div class="caption text-center">
            <blockquote><em> Some more text </em></blockquote>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4"></div>
          <div class="col-md-4 col-md-offset-4 text-center">
            <h2> Title </h2>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Answer 2

请在以下链接中找到答案 Updated code

body {
    margin-top: 50px;
}

Bootstrap有一个用于居中对齐的类，即文本中心

codepen上的基本Bootstrap

2 个答案: