0

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

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

<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>

文本居中对齐，但位于页面顶部 - 水平居中但垂直。

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

4

4 回答 4

0

这个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;

}
于 2013-07-27T13:16:28.310 回答
0

将其更改为vertical-align: middle;

于 2013-07-27T13:19:09.597 回答
0

使用此设置：

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

jsFiddle：这里

于 2013-07-27T13:28:37.090 回答
0

您不应该使用表格来设计布局。改用 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。line-height 确保内部 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>
于 2013-07-27T13:30:05.023 回答