Vertical column alignment

Navigation
1

I'm doing a code snippet where there are 3 "columns" within a "row" of foundation 5 as per the 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 not align these columns vertically. I already assigned " vertical-align:middle " in both "row" and "columns" and it did not work, I also put a fixed size for "row" and left columns with "height" 100% / p>

Any ideas for vertical alignment?

Code in JSFiddle: Here

    
asked by anonymous 31.03.2017 / 14:23

2 answers

1

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

I put some 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>
    
31.03.2017 / 15:29
1

There are several ways to align vertically. I found this form 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>
    
31.03.2017 / 15:29
ASP NET MVC with JQuery Show only 1 category on page