中心表和HTML頁面中的文字 - 垂直和水平

試圖建立一個網頁，顯示的文字在頁面中心[縱向/橫向]

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

的內容是在中心對準，但是就在頁面的頂部 - horizonatlly中心，但垂直方向。

[嘗試尋找名爲'腦凍結'的標籤，但不能。也許管理員可以把一個這樣的情況下]

來源

2013-07-27 user1361914

看到我更新的答案... –

使用此設置：

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

jsFiddle：here

來源

2013-07-27 13:28:37

在'body'中加入'margin：0;'以避免不必要的滾動條。 –

這JSFiddle展示瞭如何centerally對準

讓你的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-27 13:16:28

我想，這裏不需要寫'vertical-align：middle;'。 –

@Naveen - 通常你不能在這些情況下設置固定的寬度和高度，因爲你不知道用戶所處的分辨率。 – bestprogrammerintheworld

將其更改爲vertical-align: middle;

來源

2013-07-27 13:19:09

（元素默認對齊到中間，所以如果您不想覆蓋另一個設置，則不必設置「垂直對齊」。增加表格高度以查看效果。） –

-1我認爲這不會幫助 –

不幫助...！ –

您不應該使用表格來設計佈局。使用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>

來源

2013-07-27 13:30:05 bestprogrammerintheworld

中心表和HTML頁面中的文字 - 垂直和水平

回答

相關問題