How can I vertically align a <table> in the middle of a fixed height <div>?
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>
开发者_Python百科 </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.
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.
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>Try this:
<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>
table is a block element. To get it to vertically align, I think it needs to be displayed as inline. inline-block will often give you the best of both worlds in situations like these. Cheers!
Its easy. Always use this >> style="vertical-align:middle" << inside every TD. You can use top, middle and bottom. You can push it in the CSS too.
try this:
#centerAligned{
text-align: center;
margin-top: 50%;
}
it worked for me!!
加载中,请稍侯......
精彩评论