How can I vertically align a in the middle

2019-02-17 15:48发布

站内问答 / HTML/CSS
1608 4 4

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>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </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.

4条回答
甜甜的少女心
2楼-- · 2019-02-17 16:24

try this:

#centerAligned{
    text-align: center;
    margin-top: 50%;
}

it worked for me!!

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
3楼-- · 2019-02-17 16:28

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!

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
4楼-- · 2019-02-17 16:32

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.

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
5楼-- · 2019-02-17 16:41

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)
向帮助了您的知道网友说句感谢的话吧!