All geek questions in one place

Problem with H2 element

I am trying to get an H2 element filled with a "Portfolio" centered over 2 img elements. I have problems with this. Right now it is stuck on the left side of the 2.col-md-4 bootstrap columns. Could you point me in the right direction?

Here is the code .

Here is the 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>
+4
source share
2 answers

Your style display:flexin the class rowcauses this. Adding the following CSS should fix the immediate problem:

.portf {
  display: block;
}

, display:flex row. CSS , col-md-8, col-md-offset-2.

+4

. col-md-6 div. , .

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

Source: https://habr.com/ru/post/1650496/

More articles:


All Articles