Question

这应该很容易，但想想处理脑雾。

尝试创建一个页面，在页面中央显示文本[垂直/水平]

<html>
    <head>
        <title>Application error</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
    </head>
    <body>
                       <table>
            <tr>

            <th style="background-color:#FFFFFF;vertical-align: central">
                 This should be center of page vertcally/horizontally
                                </th>
           </tr>
        </table>


            </body>
</html>

文本在中心但在页面顶部对齐 - 水平居中但垂直。

[尝试寻找名为'脑冻结'的标签，但不能。也许管理员可以为这种情况制作一个]

Answer 1

此JSFiddle显示了如何集中对齐

将您的CSS设为

 table {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:fixed;
    margin-left:-150px; /* half of width */
    margin-top:-150px;  /* half of height */
    top:50%;
    left:50%;
}
table th
{
    text-align: center;
    vertical-align: middle;

}

Answer 2

将其更改为vertical-align: middle;

Answer 3

使用此设置：

table{
    position:relative;
    margin:0 auto;
    top:50%; /* assign manually */
}
body{
    height:100%;
    width:100%;
    position:absolute;
}

的jsfiddle：here

Answer 4

您不应该使用表格来设计布局。改为使用div

<div style="width:100%;height:100%;text-align:center;margin-top:50%;">
    <div style="height:20px;line-height:20px;font-size:12px;margin-top:-10px;">This should be center of page vertcally/horizontally</div>
</div>

注意margin-top:-10px。这是因为内部div位于外部div的50％处。但是如果你真的想要它在中间，你希望它定位在50％ - “内部div的高度的一半”和内部div的高度是20px。行高确保内部div内的文本在div的中间对齐。

当然你应该上课（或id）：

<强>的CSS：

.outer {
    width:100%;
    height:100%;
    text-align:center;    //Make sure everything inside the this div is centered
    margin-top:50%;       //Position the inner-div at half of the height of this div
}

.inner {
    height:20px;         //Set a specific height
    line-height:20px;    //Set a line-height (works when only one row of text) to align text vertically in the middle
    font-size:12px;      
    margin-top:-10px;    //Position the div upwards (half the height of this div)
}

<强> HTML：

<div class="outer">
    <div style="inner">This should be center of page vertcally/horizontally</div>
</div>

html页面中的中心表和文本 - 垂直和水平

4 个答案: