How to vertically center images next to one another-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>