CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 37

How to make a row of images a vertically and horizontally centered div?

I'm trying to get a row of images centered on the page at any screen size.

.content img {
  width: 30%;
  height: auto;
}

.content {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<body class="body_background">
  <div class="content">

    <a href="/index.html">
      <img src="http://lorempixel.com/400/200/"></img>
    </a>

    <a href="/index.html">
      <img src="http://lorempixel.com/400/200/"></img>
    </a>

    <a href="/index.html">
      <img src="http://lorempixel.com/400/200/"></img>
    </a>
  </div>

  <!-- video -->
  <div class="container">
    <video autoplay loop muted>
            <source src="background.mp4" type="video/mp4">
        </video>
  </div>

</body>

The images are centered in the Y direction currently. They are not centered in the x unless I use text-align: center but then the margins are uneven.

Upvotes: 0

Views: 101

Answers (2)

Muhammad Sameem
Muhammad Sameem

Reputation: 23

Here is a solution , you can give this a try.Thanks :) 

#container {
  display: flex;
  /* establish flex container */
  flex-direction: column;
  /* make main-axis vertical */
  justify-content: center;
  /* align items vertically, in this case */
  align-items: center;
  /* align items horizontally, in this case */
  height: auto;
  /* for demo purposes */
  border: 1px solid black;
  /* for demo purposes */
  background-color: #eee;
  /* for demo purposes */
}

.box {
  width: 100%;
  margin: 5px;
  text-align: center;
}

#bluebox {
  background: aqua;
}

#redbox {
  background: red;
}

#greenbox {
  background: green;
}
<div id="container">
  <!-- flex container -->

  <div class="box" id="bluebox">
    <!-- flex item -->
    <img src="http://highresolution.photography/images/tree-in-sunset-main.jpg" width="300px" alt="">
  </div>

  <div class="box" id="redbox">
    <!-- flex item -->
    <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" width="300px" alt="">
  </div>

  <div class="box" id="greenbox">
    <!-- flex item -->
    <img src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" width="300px" alt="">
  </div>

Upvotes: 0

HADDADI
HADDADI

Reputation: 72

Try the flexbox model : the container div should have : 

display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding-top:somevalue;

Upvotes: 2

Related Questions