Marco Marco - 2 years ago 143
HTML Question

Foundation - vertically align middle

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

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 class='large-10 columns'>
<p>{{ Article title }}</p>
<p>{{ Article summary }}</p>
<div class='large-1 columns text-center align-self-middle'>
<h3>{{ numberOfViews }}</h3>

Answer Source

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 h3

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download