How to vertically center images next to one another

Question

I want the difference between tall and short images to not be as jarring as it is. Unfamiliar with coding jargon so forgive my ineptitude. Attached image describes change I want bettergraph of what my site currently looks like and what I want it to. Images on my page are three per line, unseparated in the code, as shown below.

    <img src="so.jpg">
    <img src="ch.jpg">
    <img src="CC.jpg">
    <img src="blue.jpg">
    <img src="tv.jpg">
    <img src="do.jpg">
    <img src="bwire.jpg">
    <img src="nail.jpg">
    <img src="tom.jpg">

Does this answer your question? [Vertically center align divs with unknown height](https://stackoverflow.com/questions/40807700/vertically-center-align-divs-with-unknown-height) — Leland, Oct 24 '22 at 01:11

score 0 · Answer 1 · 2022-10-24T01:28:52.650

0

#holder{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#image1,#image2,#image3 {
  width: 100px;
  background: blue;
  height: 100px;
  margin: 10px;
}
#image2{
  height: 200px;
}

<div id="holder">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
</div>

edited Oct 24 '22 at 01:28

answered Oct 24 '22 at 01:21

Ajeet · Answer 2 · 2022-10-24T01:35:40.373

0

Vertically center images next to one another

div{
  display: flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
}

<div>
    <img src="https://via.placeholder.com/150" height="150px" width="150">
    <img src="https://via.placeholder.com/500" height="500px" width="500">
    <img src="https://via.placeholder.com/300" height="300px" width="300">
</div>

edited Oct 24 '22 at 01:35

answered Oct 24 '22 at 01:22

Ajeet

286
2
5

score 0 · Answer 3 · answered Oct 24 '22 at 01:32

Give a class in the parent wrapper image then give the class display: flex , align-items: center, justify-content: center

.parent {
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

<div class="parent">
    <img src="https://via.placeholder.com/150" height="200px" width="250">
    <img src="https://via.placeholder.com/500" height="350px" width="250">
    <img src="https://via.placeholder.com/300" height="200px" width="250">
</div>

score 0 · Answer 4 · answered Oct 24 '22 at 03:41

.holder{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  width: 100px;
  height: 100px;
  color: white;
  margin: 10px;
}

.img2{
  height: 200px;
}

<div class="holder">
  <div class="img img1">Image1</div>
  <div class="img img2">Image2</div>
  <div class="img img3">Image3</div>
</div>

How to vertically center images next to one another

4 Answers4