← Back to all snippets

css

How to vertically align inline-block elements

David Anderson | May 15, 2019
<div id="block">
  <div class="inner inner1">inline block vertically centered</div>
  <div class="inner inner1">inline block vertically centered</div>
</div>
#block { 
  line-height: 60px; 
}
.inner {
  display: inline-block;
  vertical-align: middle;
  background: blue;
  padding: 3px 5px;
}
.inner1 {
  line-height: normal;
}

Reference:

SUBSCRIBE

Drop your email in the box below to subscribe to my newsletter. Once per week you'll get Ruby/Rails tips, guides, job postings, and general thoughts from the web developer trenches.