Vertically center div in HTML-CodePudding

I can't manage to center these divs as I would.

I would like to have all icons aligned vertically and the same for the text in order to have something like that :

The logo picture is a simple <img> tag and the text is a <h4> tag.

If someone is able to help me with this please, I am stuck for a long time on this problem...

Thank you !

CodePudding user response：

Flexbox is great for this sort of thing. You can use align-items:center; to center everything within the flex container vertically and you can use justify-content:center; to center horizontally.

.item {
  display:flex;
  align-items:center;
  justify-content:center;
}

.item-text {
  line-height:1rem;
  margin-left:10px;
}

<div >
  <div >
    <div ><img src="https://via.placeholder.com/50" /></div>
    <h4 >Lorem Ipsum</h4>
  </div>
  <div >
    <div ><img src="https://via.placeholder.com/50" /></div>
    <h4 >Lorem Ipsum</h4>
  </div>
  <div >
    <div ><img src="https://via.placeholder.com/50" /></div>
    <h4 >Lorem Ipsum</h4>
  </div>
</div>

CodePudding user response：

Add the previous code, adjust the width from img and h4

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.item-text {
  line-height: 1rem;
  margin-left: 10px;
}

.item-image {
  display: flex;
  flex-direction: row-reverse;
  width: 30%;
}

h4 {
  width: 60%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div >
      <div >
        <div >
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 >Html</h4>
      </div>
      <div >
        <div >
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 >MongoDB</h4>
      </div>
      <div >
        <div >
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 >Java</h4>
      </div>
      <div >
        <div >
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 >C</h4>
      </div>
      <div >
        <div >
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 >C  </h4>
      </div>
    </div>
  </body>
</html>