Marco Marco - 6 months ago 37
HTML Question

Foundation - vertically align middle

I am using foundation v6.2.1 and I am trying to vertically align

h3
elements to middle, but I am not suceeding. How am I suppose to do that?

<div class='large-12 columns most-read'>
<div class='large-1 columns align-self-middle'>
<h3> {{ orderNumber }}</h3>
</div>
<div class='large-10 columns'>
<p>{{ Article title }}</p>
<br>
<p>{{ Article summary }}</p>
</div>
<div class='large-1 columns text-center align-self-middle'>
<h3>{{ numberOfViews }}</h3>
</div>
</div>

Answer

You can use the line-height option to vertically align text elements in the middle.

Set the div to some height and set your h3 element's line-height to the same unit.

.align-self-middle
{
 height:100px;
}

.align-self-middle h3
{
  line-height:100px;
}

You can now see your text aligned in the middle - vertically.