1

Estou fazendo um trecho de código onde há 3 "columns" dentro de uma "row" do foundation 5 conforme código abaixo:

.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>

O que está acontecendo é que não consigo alinhar essas colunas verticalmente. Já atribui o "vertical-align:middle" tanto na "row" quanto nas "columns" e não funcionou, também já coloquei um tamanho fixo para "row" e deixei as "columns" com "height" 100% e também não funcionou.

Alguma idéia para alinhar vertical?

Código no JSFiddle: Aqui

2 Respostas 2

2

Basta adicionar display: flex e align-items: center; na sua classe "pai" .row

coloquei alguns css a mais para compatibilidade com browsers mais antigos:

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>

1
  • Deu certo! obrigado @andrepaulo ... só fiz uma pequena alteração no CSS para perder esses atribuitos em tela menor que 640px se não ficava errado os grids do foundation: @media only screen and (min-width: 640px) { .align-vertical{ display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items: center; }} Commented 31/03/2017 às 15:03
1

Existem varias formas de alinhar verticalmente. Encontrei essa forma que pode resolver seu problema. Veja:

.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .