Vertical alignment in a div with position:Bsolute

Asked

Viewed 226 times

5

would like to know if it is possible to carry out the vertical-align in a div with Absolute position? Follow the code to analyze:

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

Link to the code: http://jsfiddle.net/douglas1551/pzryoqjz/

Thanks!

html css html5 css3

  • you want to align the contents of the div to the center?

  • maybe this question will help you: http://answall.com/questions/141/comoro-centralizar-verticallyo-conte%C3%Bado-de-um-elemento

  • Cesarmiguel not necessarily, I want to be able to use the vertical-align as a whole( top, Middle, bottom )

2 answers

2


For that you need to put the text amid <p></p>:

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

The way you did, it would only work if it was on table:

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

</table>
  • 1

    is Luiz discover that it is only possible using the display:table-Cell( a decpeção ) but is part of it. Thanks for the XD response

0

It is possible yes, it only gets a little longer. It is necessary to create another DIV within the one that will have absolute position:

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

...and pass all properties to her (except position:Absolute)

.teste {
  position:absolute;
}

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

Browser other questions tagged html css html5 css3

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