CODEWITHSUNDEEP
htmlcss
ElliotCK
ElliotCK

Reputation: 11

Vertically center div in HTML

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

screenshot

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

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 !

Upvotes: 0

Views: 50

Answers (2)

Ariel Trujillo
Ariel Trujillo

Reputation: 21

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 class="container">
      <div class="item">
        <div class="item-image">
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 class="item-text">Html</h4>
      </div>
      <div class="item">
        <div class="item-image">
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 class="item-text">MongoDB</h4>
      </div>
      <div class="item">
        <div class="item-image">
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 class="item-text">Java</h4>
      </div>
      <div class="item">
        <div class="item-image">
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 class="item-text">C</h4>
      </div>
      <div class="item">
        <div class="item-image">
          <img src="https://via.placeholder.com/50" />
        </div>
        <h4 class="item-text">C++</h4>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

user19103974
user19103974

Reputation: 358

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 class="container">
  <div class="item">
    <div class="item-image"><img src="https://via.placeholder.com/50" /></div>
    <h4 class="item-text">Lorem Ipsum</h4>
  </div>
  <div class="item">
    <div class="item-image"><img src="https://via.placeholder.com/50" /></div>
    <h4 class="item-text">Lorem Ipsum</h4>
  </div>
  <div class="item">
    <div class="item-image"><img src="https://via.placeholder.com/50" /></div>
    <h4 class="item-text">Lorem Ipsum</h4>
  </div>
</div>

Upvotes: 1

Related Questions