Hey.

How to align the height (middle) of the table inside the block?

Here is the code:

<html> <head> <style> *{ margin:0px; padding:0px; } #div4{ background-color:red; height:300px; } #table1{ display:inline-block; vertical-align:middle; } </style> </head> <body> <div id="div4"> <table id="table1"> <tr> <td id="td1"><img id="girl" src="images/girl.jpg"/></td> </tr> </table> </div> </body> </html>

Why assignment to a display table : inline-block; vertical-align: middle; does not work? It works with pictures and other small elements.

    2 answers 2

    Because display:inline-block; vertical-align:middle; display:inline-block; vertical-align:middle; aligned relative to each other. Those. if there was another element with such properties next to the table, then it would have leveled off.

    You can use the pseudo-element: before (and only them) for the wrapper #div4 .

     #div4:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } 

     *{ margin:0px; padding:0px; } #div4{ background-color:red; height:300px; text-align: center; } #div4:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } #table1{ display:inline-block; vertical-align:middle; } 
     <div id="div4"> <table id="table1"> <tr> <td id="td1"><img id="girl" src="images/girl.jpg"/></td> </tr> </table> </div>

    • thanks for the answer. I did not come across this. Can you throw an article, where they write about it? - Dimon
    • What does it mean "Can I use the: before pseudo-element for wrapper # div4"? As far as I understand, this pseudo element is placed BEFORE # div4 and does not contain (does not wrap) # div4 in itself. - Dimon
    • I mean #div4:before this post - HamSter

    I usually use a wrapper.

    css:

     .block{ width:100px; height:120px; background:black; } .wrap{ width:100px; height:120px; display:table-cell; vertical-align:middle; } .any_in_td{ width:50px; height:100px; background:red; } table{ margin:auto; }

    html:

     <div class="block"> <div class="wrap"> <table> <tr> <td><div class="any_in_td"></div></td> </tr> </table> </div> </div>
    • thanks for the answer. Can you throw an article, where they write about it? - Dimon
    • @Dimon That's about centering - iMacros Sales