Vertical Align with Absolute Positioning

Question

In the following code I\'m trying to make the elements within the green div.middle elements to vertically align to the middle.

---

I\'ve tried the table-cell appro

Answer 1

add a parent div with display:table and height:100% to .table-cell will fix this

So the html structure wil be :

   <div class="middle">
        <div class="table">
           <div class="table-cell">
               <p>test</p>
           </div>
        </div>    
  </div>

add this Style:

#sidebar .table{
   display:table;
   height:100%;
}

See jsfiddle I have modified

Answer 2

I used to have problems with vertical-align property before. I tend to realize that this property seemed to be more suited for tables. So I added this in your code on JSFiddle and it looked alright to me. Could you see if this would work with you?

            <div class="middle">
                <table height="100%" width="100%">
                    <tr>
                        <td style="vertical-align:middle">
                            <p>test</p>
                        </td>
                    </tr>
                </table>
            </div>

Answer 3

You can set a height for that table-cell.

.table-cell{
height: 200px;/* for example */
vertical-align: middle;
display: table-cell;}

<div class="middle"><div class="table-cell"><p>test</p></div></div>