Vertical alignment of columns

Asked

Viewed 1,579 times

1

I’m making a code snippet where there are 3 "Columns" inside a "Row" of Foundation 5 as code below:

.row{
  background-color:yellow;
}
.align-vertical{
  align-vertical:middle;
}
<div class="row align-vertical">
      <div class="small-4 columns">
        <p>
          teste
          <br>
          teste
        </p>
      </div>
      <div class="small-4 columns">
        <p>
          Teste
        </p>
      </div>
      <div class="small-4 columns">
        <p>
          Teste
        </p>
      </div>
    </div>

What’s happening is that I can’t align these columns vertically. It already assigns the "vertical-align:middle" both in "Row" and "Columns" and it didn’t work, I also put a fixed size for "Row" and left the "Columns" with "height" 100% and also didn’t work.

Any idea for vertical alignment?

Code in the Jsfiddle: Here

html css zurb-foundation

2 answers

2


Just add display: flex and align-items: center; in your class "father" .row

I added a few more css for compatibility with older browsers: 

display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */


.row{
  background-color:yellow;

  display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
}
<div class="row align-vertical">
      <div class="small-4 columns">
        <p>
          teste
          <br>
          teste
        </p>
      </div>
      <div class="small-4 columns">
        <p>
          Teste
        </p>
      </div>
      <div class="small-4 columns">
        <p>
          Teste
        </p>
      </div>
    </div>

  • It worked! thanks @andrepaulo ... I just made a small change in CSS to lose those attributes on screen less than 640px if it wasn’t wrong for the Foundation grids: @media only screen and (min-width: 640px) {&#xA; .align-vertical{&#xA; display: -webkit-flex; /* Safari */&#xA; -webkit-align-items: center; /* Safari 7.0+ */&#xA; display: flex;&#xA; align-items: center;&#xA; }}

1

There are several ways to align vertically. I found this way that can solve your problem. See:

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.small-4 columns {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}
<div class="outer">
  <div class="middle">
    <div class="small-4 columns">
        <p>
          teste
          <br>
          teste
        </p>
      </div>
      <div class="small-4 columns">
        <p>
          Teste
        </p>
      </div>
      <div class="small-4 columns">
        <p>
          Teste
        </p>
      </div>
  </div>
</div>

Browser other questions tagged html css zurb-foundation

You are not signed in. Login or sign up in order to post.