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

我想在一个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

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

回答

相关问题