Center images within grid

Question

I'm creating a grid to display images of a team. I have a grid of images and I need to position my bottom 2 images below the top 2 middle images - basically centralizing the bottom 2. How can I achieve this? I've added my HTML and CSS below. Any help will be appreciated. Thanks.

.team-grids .team-img {
  overflow: hidden;
  position: relative;
  display: block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="team-row">
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

i think that adding, display: flex instead of display:block and justify-content: center would do the trick — mindmaster, Mar 05 '19 at 17:41
@MiguelCruz that didn't work :(. Isn't moving the images at all — Janine Alexander, Mar 05 '19 at 18:02
The code you've shared does not produce the effect you're showing. Please include a [mcve]. — Heretic Monkey, Mar 05 '19 at 18:14

mm-codes · Answer 1 · 2019-03-05T18:16:16.340

you can try adding this:

 .team-grids {
        margin: 0 auto;
}

edited: my bad, pls try this one. add justify-content-md-center

.team-grids .team-img {
 overflow: hidden;
 position: relative;
 display: block;
}

 
 <link  rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="row team-row  justify-content-sm-center">
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

score 0 · Answer 2 · answered Mar 05 '19 at 18:06

Done. Just need to add text-align: center; , see the example below :D

.team-grids .team-img {
 overflow: hidden;
 position: relative;
 display: block;
  text-align: center;
}

<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="team-row">
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

score 0 · Answer 3 · answered Mar 05 '19 at 18:10

Try to add these rules display: flex; and justify-content: center; to .team-row class like below

.team-row{
  display: flex;
  justify-content: center;
}

Run the Code snippet bellow :

.team-row{
  display: flex;
  justify-content: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="team-row">
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

Rhythm Ruparelia · Answer 4 · 2019-03-06T11:33:23.580

.team-grids .team-img {
  overflow: hidden;
  position: relative;
  display: block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="team-row row justify-content-center">
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Three changes to your code:

1) Add class row and justify-content-center alongwith team-row. Columns are always used in combination with rows in Bootstrap.

2) Add class img-fluid, because img-responsive is a Bootstrap 3 class which is changed to img-fluid in Bootstrap 4.

3) Add class mx-auto to team-img in case you need to center the image in column. For text, you can use text-center.

Center images within grid

4 Answers4