html中的水平和垂直居中文本

我有一個需要居中水平和垂直背景圖片的div。除此之外，我還想顯示1行文字，也是水平和垂直居中。html中的水平和垂直居中文本

我設法讓圖像居中，但文字不是垂直居中。我認爲vertical-align：middle會做到這一點。

下面的代碼，我有：

<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;"> 
    <div style="color:#ffffff; text-align: center; vertical-align:middle;" > 
     Some text here. 
    </div> 
</div>

任何想法？

解決方法：我實際上是通過使用表來獲得此功能的。（我可能會被HTML社區詛咒到底下）。有什麼重要的理由不使用這個btw？儘管如此，我仍然對使用div的解決方案感興趣。

<table width="100%" height="100%"> 
    <tr> 
    <td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td> 
    </tr> 
</table>

來源

2010-03-23 Christophe Herreman

任何東西的使用表，是不是表格數據具有觸發可訪問的*聲譽*的問題。但是，只有當表內容在* linearization *中斷時纔會觸發這些問題。測試線性化有一個技巧：添加'table，tr，td {display：block; }'測試CSS表格：如果內容仍然可用/可讀（儘管佈局中斷），表格序列化正常;如果它完全無法使用，輔助技術將無法解析您的桌子。在單細胞表的情況下，線性化不會被破壞，所以你應該沒問題。 – 2010-03-29 11:26:11

@Christophe Herreman：「有什麼重要的理由不使用這個順便說一句嗎？」在我看來，不，在這種情況下沒有一個重要原因不使用表格，除了解決問題時的自動滿足。對於這個特定的任務，使用表甚至可能是更多的跨瀏覽器解決方案，而不是使用CSS。 – 2010-03-29 16:14:37

@Marco Demaio有一個重要的原因。那些視覺障礙者和使用屏幕閱讀器的人不易接近。 – ghoppe 2010-05-18 14:06:14

在CSS中沒有div內容的直接垂直居中，但有間接的方式來實現它。 http://phrogz.net/CSS/vertical-align/index.html

在SO中也有很多類似的問題。 How to vertically center a div for all browsers?

來源

2010-03-23 09:05:20 Iraklis

做到這一點的「正確」方式取決於您將擁有多少文本。如果你知道那裏會發生什麼，那麼它變得更容易。 – 2010-03-23 09:08:43

我只有1行文字要顯示。 – 2010-03-23 09:11:25

塊元素的水平居中傳統做這樣：

div.inner { margin: 0 auto; }

注：上面不會與IE怪癖模式工作，所以總是把DOCTYPE在頂部您的文件強制它進入符合標準的模式。

垂直居中更乏味。見Vertical Centering in CSS

來源

2010-03-23 09:06:27 cletus

內部div必須指定一定的寬度才能居中，即「width：300px;」 – 2010-05-18 15:16:12

不使用JavaScript（ALA類似的ThickBox等用於定位的照片/中心字幕），最接近我能來是這樣的：

<body style="height:200px; min-height:800px;"> 
    <div style="background: url('background.png') no-repeat center; height:100%;"> 
     <div style="text-align: center; position:relative; top:50%; color:#fff;"> 
     Some text here. 
     </div> 
    </div> 
</body>

注意，我必須指定某種容器的高度（在這種情況下爲BODY，但它也可以應用於包裝DIV，我認爲）。在資源管理器6中，您可以將BODY高度設置爲100％，但在Firefox中這不起作用，並且可能無法在其他現代瀏覽器中使用。

編輯：

找到一個更好的解決方案：

<style type="text/css"> 
    html, body {height:100%;} 
</style> 
</head> 
<body> 
    <div style="background: url('background.png') no-repeat center; height:100%;"> 
     <div style="text-align: center; position:relative; top:50%; color:#fff;"> 
      Some text here. 
     </div> 
    </div> 
</body>

來源

2010-03-23 14:23:47 Todd

如果你必須使用只有一行文字和父div有固定高度使用line-height屬性。假設父級高度爲500px，則使用CSS line-height：500px;爲文本。

來源

2010-03-24 12:13:07

如果你想得到垂直居中，我會建議在DIV中使用一個表格（正如Cletus建議的其他方式可能是單調乏味的）。

div.centered table {margin: 0 auto;} /* no width needs to be specified for table */ 
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */ 


<!-- borders added only to help understanding --> 
<div class="centered" style="border: 1px solid #cccccc;"> 
    <table style="border: 1px solid #ff0000;"> 
     <tbody> 
      <tr><td> 
      Some text here 
      </td></tr> 
     </tbody> 
    </table> 
</div>

如果你只對水平居中（不垂直）有興趣，你可以只用DIV：

div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */ 

<!-- borders added only to help understanding --> 
<div class="centered" style="border: 1px solid #cccccc;"> 
    <div style="border: 1px solid #ff0000;"> 
     Some text here 
    </div> 
</div>

正如你可能爲了注意到水平對齊一個DIV一個DIV裏面你也需要指定內部DIV的固定寬度。這可能不是你想要做的事情，所以總是可以使用第一個解決方案（帶TABLE的解決方案），並簡單地刪除「vertical-align：middle;」。當你想獲得水平居中。

我測試了使用文檔具有：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

在IE7，FF 3.6和Safari 4.0.4

來源

2010-05-18 13:32:57

html中的水平和垂直居中文本

回答

相關問題