CODEWITHSUNDEEP
htmlcss
husharoonie
husharoonie

Reputation: 441

Center a div of Images

How can I center a collection of 3 images. I would like the collection to be centered on the webpage. SIDE BY SIDE*. collection of side by side images with spacing.

.column {
  float: left;
  width: 30.00%;
  padding: 5px;
}


/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}
<div class="row">
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
</div>

Upvotes: 2

Views: 58

Answers (2)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Easiest Solution to use Flex.

.row{
    display:flex;
    justify-content:center; //This will get your images to center.
}

Images width is purposefully reduced to 20%.

.column {
  width: 20.00%;
  padding: 5px;
}


/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
  display: flex;
  justify-content: center;
}
<div class="row">
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
</div>

Make sure to check browser Compatibility with Flexbox. It will work with most of the modern browsers.

Upvotes: 1

sol
sol

Reputation: 22919

One option using Grid:

body {
  margin: 0;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* change as you need */
  max-width: 50vw;
}

.image img {
  max-width: 100%;
  height: auto;
  display: block;
}
<div class="wrapper">
  <div class="image">
    <img src="https://unsplash.it/400" alt="BullishTrade">
  </div>
  <div class="image">
    <img src="https://unsplash.it/400" alt="BullishTrade">
  </div>
  <div class="image">
    <img src="https://unsplash.it/400" alt="BullishTrade">
  </div>
</div>

Upvotes: 0

Related Questions