vertically center inline content

Question

I have text and image content/divs that are aligned. But I want them to be centred vertically with each other as well.

html

<div class="cell"><a href="...'</a></div>
<div class="separate"></div>
<div class="cell"><a href="...'</a></div>
<div class="separate"></div>
<div class="cell"><a href="...'</a></div>

css

.cell, .separate {
  display: inline-block;
  margin: 0 5px;
}

.separate {
  width: 2px; height: 25px;
  background-color: red;
}

See: http://stackoverflow.com/questions/5932201/how-to-vertical-align-an-inline-block-in-a-line-of-text — Chris Happy, Jan 11 '17 at 00:24

score 1 · Accepted Answer · answered Jan 11 '17 at 00:40

1

To this rule, add vertical-align: middle;:

.cell, .separate {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}

answered Jan 11 '17 at 00:40

Johannes

53,485
15
52
104

didn't think it was that easy. Good browser support? – user3550879 Jan 11 '17 at 01:30
yes - inline-block is nothing fancy... – Johannes Jan 11 '17 at 09:54
Appology, I meant does vertical-align: middle; have good support – user3550879 Jan 11 '17 at 22:23
yes, see here: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp - scroll down a bit to see browser support: Since IE 4, Chrome 1, Firefox 1, Safari 1, Opera 4... – Johannes Jan 11 '17 at 22:29

score 0 · Answer 2 · answered Jan 11 '17 at 00:35

One way to vertically align content is using line height. This method only works for one line of text though:

HTML

<div id="parent">
    <div id="child">Text here</div>
</div>

CSS

#child {
    line-height: 200px;
}

This can be extended for images too:

HTML

<div id="parent">
    <img src="image.png" alt="" />
</div>

CSS

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

You can read about other methods to vertically center content here: http://vanseodesign.com/css/vertical-centering/

score 0 · Answer 3 · answered Jan 11 '17 at 00:40

You can vertically align inline content with vertical-align

.cell, .separate {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}

.separate {
  width: 2px; height: 25px;
  background-color: red;
}

<div class="cell">asdf</div>
<div class="separate"></div>
<div class="cell">asdf</div>
<div class="separate"></div>
<div class="cell">asdf</div>

vertically center inline content

3 Answers3