2016-09-16 2 views
1

問題は、画面を拡大するとimg-thumbnailがセンタリングしないことです。 img-thumbnailが何をしているのか、それを修正する方法を理解していないと思うので、なぜこれを行うのが好きですか?私は自分のhtmlとcssコードを攻撃します。私はキャプションがサムネイルに含まれるようにしたいので、部分的に私の問題を解決しセンターブートストラップimg-thumbnail

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

答えて

1

それは 画像に to CheckクリックhereをIMG-resposiveと中央ブロックのクラスの追加を参照してください動作します! を参照してください

+0

あなたが正しいですが、上記のように、それはサムネイルのキャプションを削除します。 – manuel

+0

そのリンクを確認しましたか?画像とともにそこにあります。 –

+0

キャプションがあることを確認しましたが、サムネイルの中に入れたいです。白い部分に。 – manuel