在div内垂直居中未知长度的文本 [英] Vertically center unknown length of text inside a div

问题描述

我想将未知长度的文本居中（确定它仅限于一定的大小，但我不知道是否需要一行或两行）。因此，我不能使用 line-height 。我试着用 display：table-cell ，但是布局被破坏了。我不能在 top 中使用一些技巧，因为我需要这个定位。

供参考。

我会在 .background 内放置 .TileText 。为背景图像创建空白div在语义上不正确，在大多数情况下不是必需的。一个单独的背景div的情况是，如果你需要设置背景图像的不透明度与内容分开。

 < ; div class =background> 
< div class =TileText> MyText  - 另一长，长文本< / div> 
< / div> 
 
 
 .background {
 background-color：＃000; 
 height：400px; 
宽度：100％; 
 display：table 
} 
 
 .TileText {
 max-width：200px; 
 display：table-cell; 
 vertical-align：middle; 
颜色：#fff; 
明确：两者; 
 padding-left：10px; 
 
  

---

其他相同的问题答案。

水平和垂直居中预标记而不使用表格？

旧的中心在div问题中的图像（图像大小可变 - div大小固定）

此外，谷歌搜索center vertical text css的第一个结果会给你我发布在JSfiddle

中的代码结构相同

I want to center an unknown length of text (ok it's limited to a certain size, but I don't know if it needs one line or two lines) inside a div. Therfore I cannot use line-height. I tried to use display: table-cell, but than the layout is destroyed. I cannot use some tricks with top because I need this for positioning.

Here is an example.

Mockup:

Original code:

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

Current state:

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

Update:

Now the text is vertically aligned. But I'm afraid display: table would only work with modern browser.

解决方案

I've updated your fiddle:

It seems to work

see: http://jsfiddle.net/hSCtq/11/ for reference.

I would put .TileText inside of .background. Creating an empty div for the sake of a background image is not semantically correct, and not necessary in most situations. One situation for a separate background div would be if you need to set the opacity of a background image separately from the content.

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

---

Other questions with the same answer.

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 )

Also, the first result from googling "center vertical text css" will give you the same code structure I posted in my JSfiddle

这篇关于在div内垂直居中未知长度的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！