vertically center inline content [duplicate] - html

Question

This question already has answers here:
How to vertical align an inline-block in a line of text?
(2 answers)
Closed 6 years ago.
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;
}

Answer 1

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

Answer 2

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/

Answer 3

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>