H2要素の問題

Question

2つのimg要素の上に中央の "Portfolio"で埋められたH2要素を取得しようとしています。私はこれをするのに苦労している。今は、2つの.col-md-4ブートストラップ列の左側にスタックされています。あなたは私を正しい方向に向けることができますか？

ここはthe codepenです。 rowクラスの

<div class="portf row"> 
    <h2>Portfolio</h2> 

    <div class="portfolio col-md-4"> 

    <img class="port1 img-responsive" src="https://s8.postimg.org/v4ol85ct1/hangman.jpg"> 
    <p>A game of hangman made with: HTML, CSS, and JavaScript.</p> 

    </div> 
    <div class="col-md-4 img-responsive"><img src="https://s8.postimg.org/3kagp7ctx/BFSkinner.jpg" alt="pic 2"> 
    <p>A B.F. Skinner tribute page made with: HTML and CSS.</p> 
    </div> 
</div> 

Answer 1

あなたdisplay:flexスタイルこれを引き起こしている。ここで

は、コードがあります。以下のCSSを追加すると、すぐに問題を修正する必要があります。

.portf { 
    display: block; 
} 

あなたはrowクラスにdisplay:flexを使用して再考することもできます。あなたのCSSの多くは、それを取り除き、の列にcol-md-offset-2クラスを追加することで簡略化できます。

Answer 2

まず、行クラスを削除する必要があります。 次に、両方の画像divにcol-md-6クラスを使用します。 これがあなたを助けてくれることを願っています。

<div class="portf"> 
     <h2>Portfolio</h2> 

     <div class="portfolio col-md-6"> 
     <img class="port1 img-responsive" src="https://s8.postimg.org/v4ol85ct1/hangman.jpg"> 
     <p>A game of hangman made with: HTML, CSS, and JavaScript.</p> 
     </div> 
     <div class="col-md-6 img-responsive"> 
     <img src="https://s8.postimg.org/3kagp7ctx/BFSkinner.jpg" alt="pic 2"> 
     <p>A B.F. Skinner tribute page made with: HTML and CSS.</p> 
     </div> 
    </div>