0

我想在文本适合一行时和文本适合两行时垂直对齐文本。这里有一个jsFiddle。

在此处输入图像描述

假设我的 HTML 如下所示：

<div class="Container">
   <div class="SomeClass">test text</div>
   <div class="SomeClass">some very very long text</div>  // this text is cut
</div>​

我的 CSS 看起来像这样：

.Container{
    padding:3px 0px 6px 0px;
    height:30px;
    margin:30px 30px;}

.SomeClass{
    height:30px;
    float:left;
    width:100px;
    overflow:hidden;
    border:1px solid black;
    text-align:center;
    font-family:"Trebuchet MS";
    font-weight:bold;
    font-size:13px;
    line-height:28px;}​

目前，我正在使用该line-height属性：我将其设置为容器的高度，并且垂直对齐文本。问题是当文本适合 2 行时，这不再起作用。请注意，这些.Container项目必须具有一定的高度/宽度并留下overflow:hidden;

如果您有任何建议，请告诉我。

谢谢。

4

2 回答 2

3

首先我不明白这个

请注意， .Container 项目必须具有一定的高度并留下溢出：隐藏；

如果你给出一个固定的高度，我相信它不会适合那里的 2 行......

关于答案，您可以使用display: table-cell、使用和vertical-align: middle;删除float: left;.SomeClass

演示

CSS（当然你可以玩高度）

.Container{
    padding: 3px 0px 6px 0px;
    margin:30px 30px;
    height: 200px;
}

.SomeClass{
    width:100px;
    height: 200px;
    border:1px solid black;
    text-align:center;
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 13px;
    display: table-cell;
    vertical-align: middle;
}
于 2012-12-26T15:03:42.173 回答
1

如果不使用 CSS3 或表格，就无法垂直对齐多行文本。

Line-height 定义了文本的高度，是垂直对齐单行文本的好方法。多行文本也可以使用 line-height 对齐，但是这一次，你必须小心进行正确的边距计算，因为 line-height 是 2 行的两倍，3 行的三倍，等等。

我建议使用 CSS3 或使用 php 或其他服务器端语言来强制换行 '
'，然后使用适当的 css 垂直偏移文本。

于 2012-12-26T15:05:56.167 回答