中心bootstrap img-thumbnail

时间:2016-09-16 11:38:04

标签: html css twitter-bootstrap-3 centering

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

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

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

HTML CODE

 <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;
}

1 个答案:

答案 0 :(得分:1)

它有效 将img-resposive和center-block类添加到图像中 to Check点击here! 见