Menu
Why does the code below not cause the <table> to be vertically-aligned in the middle of the <div>?
<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
I want the <table> in the middle of the <div>, but it is at the top! How can I fix this?
Thanks for your future advice.
908
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
If you want to center the table by using text-align on the outward <div>, you can do it by using text-align. You can also style the cells of the table with a text-align or vertical-align value whenever you want to position the inline text in a specific way.
Outside of table cells, vertical-align sets the vertical alignment of text within a line, rather than the vertical alignment of entire elements like your table.
However, if you set display: table-cell; on your <div>, that seems to achieve the effect you want.
I’m not sure how many browsers support this though. I’ve checked in Chrome 6, Firefox 2 and Opera 10.5, and they’re fine with it. Internet Explorer could be a different matter.
144
Have you tried "display:flex;"?
div{
width: 850px;
height: 470px;
display: flex;
/* WIDTH and HEIGHT are required */
justify-content: center;
align-items: center;
}
td, table{
border-collapse: collapse;
border: 1px solid black;
}<div>
<table>
<tr>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>2019</td>
<td>2018</td>
<td>2017</td>
</tr>
</table>
</div>
answered Oct 05 '22 10:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With