5

gostaria de saber se é possivel realizar o vertical-align em uma div com position absolute? Segue o código para analise:

.teste {
    background: #F00;
    width: 500px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    position:absolute;
}

Link com o codigo: http://jsfiddle.net/douglas1551/pzryoqjz/

Valeu!

3

2 Respostas 2

2

Para isso você precisa colocar o texto entre <p></p>:

<div class="teste">
   <p>Hue BR<br/>Hue BR<br/>HUe BR</p>
</div>

O modo que você fez, só funcionaria se fosse em tabela:

<table>
    <tr>
        <td aling="middle" height="100" style="background:red">Hue BR<br/>Hue<br/>HUe BR</td>
    </tr>

</table>
1
  • 1
    é Luiz descobrir que só é possivel usando o display:table-cell( uma decpeção ) mas faz parte. Valeu pela resposta XD Commented 29/08/2014 às 13:40
0

É possível sim, só fica um pouco mais extenso. É preciso criar uma outra DIV dentro daquela que terá posição absoluta:

<div class="teste">
  <div class="testeInterna">
     Hue BR<br>Hue BR<br>HUe BR
  </div>
<div>    

...e passar todas as propriedades para ela (exceto position:absolute)

.teste {
  position:absolute;
}

.testeInterna{
   background: #F00;
   width: 400px;
   height: 200px;
   vertical-align: middle;
   display:table-cell;
}

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 .