H2 Element Problem

Question

Ich versuche, das H2-Element gefüllt mit "Portfolio" über den 2 img Elemente zentriert zu bekommen. Ich habe Probleme damit. Im Moment steckt es auf der linken Seite der 2 .col-md-4 Bootstrap-Spalten. Könnten Sie mir in die richtige Richtung zeigen?

Hier ist the codepen. Hier

ist der Code:

<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

Ihre display:flex Stil auf der row Klasse verursacht dies. Wenn Sie folgende CSS sollte das unmittelbare Problem beheben:

.portf { 
    display: block; 
} 

Sie könnten mit display:flex auf der row Klasse zu überdenken. Ein großer Teil Ihres CSS könnte vereinfacht werden, indem Sie es entfernen und die col-md-8 Spalten zentrieren, indem Sie eine col-md-offset-2 Klasse hinzufügen.

Answer 2

Sie müssen zuerst die Zeilenklasse entfernen. Dann verwenden Sie Col-MD-6-Klasse für beide Bild div. Hoffe das wird dir helfen.

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