垂直居中未知長度的文本里面的文本

我想在一個div中居中未知長度的文本（確定它被限制到一定的大小，但我不知道是否需要一行或兩行）。因此，我不能使用line-height。我試圖使用display: table-cell，但比佈局被破壞。我無法使用top的一些技巧，因爲我需要這個定位。垂直居中未知長度的文本里面的文本

Here is an example。

樣機：

Mockup

原始代碼：

HTML：

<div class="background">&nbsp;</div> 
<div class="TileText">MyText - Another long, long, long text</div>

CSS：

.background{ 
    background-color:#000; 
    height: 400px; 
    width: 100%; 
} 

.TileText{ 
    position: relative; 
    top: -135px; 
    max-width: 200px; 
    height: 80px; 
    background-color: #FFF; 
    color: #black; 
    clear: both; 
    padding-left: 10px; 
}

當前狀態：

HTML：

<img src="images/castle.png" width="300" height="333" title="Castle" alt="Castle" /> 
<div class="TileTextWrapper"> 
    <div class="TileText">Text</div> 
</div>

CSS：

.TileTextWrapper{ 
    position: relative; 
    top: -135px; 
    max-width: 200px; 
    height: 80px; 
    background-color: #FFF; 
    color: #57abe9; 
    clear: both; 
    padding-left: 10px; 
    display: table; 
} 

.TileText{ 
    display: table-cell; 
    vertical-align: middle; 
}

更新：

現在文本是垂直對齊的。但恐怕display: table只適用於現代瀏覽器。參考http://jsfiddle.net/hSCtq/11/：

來源

2012-01-18 testing

瀏覽器兼容性：http://reference.sitepoint.com/css/display#compatibilitysection – 2012-01-18 18:36:42

以顯示爲中心的這個方法：表肯定會在IE8和後續工作。 – 2012-01-18 18:37:08

查看http://css-tricks.com/centering-in-the-unknown/。運行良好，如果您希望它能夠在較舊的瀏覽器上運行，您只需將代碼添加到代碼中而不是使用'：before'。 – Michael 2012-01-18 18:45:02

我已經更新了你的提琴：

看來工作

見。

我會把.TileText放在.background的裏面。爲背景圖像創建空白div在語義上不正確，在大多數情況下不是必需的。如果您需要將背景圖像的不透明度與內容分開設置，則單獨背景div的一種情況是。

<div class="background"> 
    <div class="TileText">MyText - Another long, long, long text</div> 
</div> 


.background { 
    background-color:#000; 
    height: 400px; 
    width: 100%; 
    display: table 
} 

.TileText{ 
    max-width: 200px; 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    clear: both; 
    padding-left: 10px; 
}

與同回答其他問題。

Horizontally and vertically center a pre tag without the use of tables?

The old center a image in a div issue (image size variable - div size fixed)

此外，從谷歌上搜索「中心垂直文本的CSS」將給你相同的代碼結構我貼在我的jsfiddle第一個結果

來源

2012-01-18 17:45:08

請在此複製任何相關代碼以備將來參考。 – cambraca 2012-01-18 17:47:22

此外，您的代碼不適合我（Win7上的Chrome 16） – cambraca 2012-01-18 17:48:06

「.text-container」發生了什麼？目前我沒有看到它的中心... – testing 2012-01-18 17:48:48

您必須添加display:table-cell;，並添加vertical-align:middle;

來源

2012-01-18 17:42:40

我應該在哪裏添加？如果我將這個添加到'.TileText'文本居中，但div顯示在底部。 – testing 2012-01-18 17:50:46

所以你想要的是除了相對於頁面垂直居中的div之外，文本在div中居中？ – 2012-01-18 18:27:18

該div不應該垂直居中，但我想定義div的位置（如我的代碼中）。 – testing 2012-01-18 18:29:31

-1

實現垂直對齊方式，你有使用表格。你可以寫你的代碼，因爲這：

<div style="width:600px; height:600px; border:#000000 1px solid;"> 

    <table style="width:100%; height:100%; vertical-align:middle"> 
     <tr> 
      <td> 
    MyText - Another long, long, long text 
      </td> 
     </tr> 
    </table> 
</div>

來源

2012-01-18 17:55:37 srijan

添加<p>標籤您TileText DIV中：

HTML

<div class="background"> &nbsp; </div> 
<div class="TileText"><p>MyText - Another long, long, long text</p></div>

CSS

.background{ 
    background-color:#000; 
    height: 400px; 
    width: 100%; 
} 

.TileText{ 
    position: relative; 
    top: -135px; 
    max-width: 200px; 
    height: 80px; 
    background-color: #FFF; 
    color: #black; 
    clear: both; 
    padding-left: 10px; 
} 

.TileText p { 
    position:absolute; 
    display: table-cell; 
    vertical-align: middle 

    }

例這裏：display`屬性`http://jsbin.com/ubixux/2/edit

來源

2012-01-18 18:21:24

垂直居中未知長度的文本里面的文本

回答

相關問題