CODEWITHSUNDEEP
htmlcsszurb-foundation
Ludwig
Ludwig

Reputation: 1801

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>

Upvotes: 1

Views: 9226

Answers (2)

Hari Harker
Hari Harker

Reputation: 791

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.

Upvotes: 2

Shoaib Iqbal
Shoaib Iqbal

Reputation: 1178

The .align-self-middle class is included in the foundation-flex version and it is not available in other version. Your code looks okay and it should work.

See the working example. http://codepen.io/shoaibik/pen/xOKorV

Upvotes: 1

Related Questions