中心引导 img-thumbnail答案

【问题标题】：center bootstrap img-thumbnail中心引导 img-thumbnail
【发布时间】：2017-01-24 15:05:56
【问题描述】：

问题是当我展开屏幕时，img-thumbnail 没有居中。我想为什么会这样做，因为我相信我不明白 img-thumbnail 的作用以及如何修复它。我将攻击我的 html 和 css 代码。我想我可以插入

classes="img-thumnail img-responsive center-block"

这部分解决了我的问题，因为我希望将标题包含在缩略图中。

HTML 代码

 <div class="container-fluid">
      <div class="well outline">
      <h1 class="text-center">Ernest Miller Hemingway</h1>
      <h2 class="text-center">The man who made Pamplona famous</h2>
      <div class="img-thumbnail">
        <image src="http://www.ernesthemingwaycollection.com/_themes/hemingway/img/about-hemingway/galleries/02-20141010225753.jpg" alt="Hemingway with a cow" class="img-responsive">
        <div class="caption text-center">
          Ernest Hemingway laying down next to a cow that is used by bull fighters for training.       </div>
       </div>
      <div>
        <h3>Here is a timeline of Ernest Hemingway</h3>
        <div>
          <ul> 
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
            <li><b>1899</b> - Born in Oak Park, Illinois</li>
          </ul>
          <p>"Courage is grace under pressure."</p>
          <p>- Ernest Hemingway</p>
        <div>
        <p>If you want to know more about Ernest Hemingway take a look at his <a href="#">wikipedia entry</a>.</p>
      </div>

        <!-- Figure out how to add the line that crosses tha page on bootstrap -->

      <p> Coded by Manuel Martin</p>

      </div>
    </div>

CSS 代码

h1 {
  font-size: 60px;
}

h2{
  font-size: 33px;
}

.outline{
  margin: 70px 70px;
}

【问题讨论】：

标签： html css twitter-bootstrap-3 centering

【解决方案1】：

它的工作原理将 img-resposive 和 center-block 类添加到图像 to Check点击here！见

【讨论】：

是的，你是对的，但正如我上面提到的，它会删除缩略图的标题。
你检查过那个链接吗？它与图像一起存在
我检查了标题是否存在，但我希望它位于缩略图内。在白色区域。
您可以制作像此链接上给出的卡片的图像 div w3schools.com/howto/howto_css_cards.asp
坦克再次回到我身边。这就是我要找的codepen.io/FreeCodeCamp/full/NNvBQW。但是然后使用我自己的代码。