CODEWITHSUNDEEP
htmlcss
Jiew Meng
Jiew Meng

Reputation: 88207

Misaligned inline block elements with variable heights

I have code like:

HTML

<div class="container">
    <div class="item">
      <p>Testing</p>
      <p>Testing</p>
    </div>
    <div class="item">
      <p>Testing</p>
    </div>
</div>

CSS

.container {
  text-align: center;
  vertical-align: top;
}

.item {
  background: orange;
  width: 40%;
  padding: 30px;
  display: inline-block;
  margin-bottom: 20px;
}

I noticed things are ok when the inline blocks have same content. But why when they have different heights, does it become misaligned?

CodePen

Upvotes: 0

Views: 272

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Add vertical-align: top to .item not the .container, it applies to inline-level and table-cell elements . You could use vertical-align: middle to vertically center the elements.

Examples on different vertical-align values here should make things clear.

.container {
  text-align: center;
}
.item {
  background: orange;
  width: 40%;
  padding: 30px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 20px;
}
<div class="container">
  <div class="item">
    <p>Testing</p>
    <p>Testing</p>
  </div>
  <div class="item">
    <p>Testing</p>
  </div>
</div>

Upvotes: 2

Related Questions