在span元素内部垂直对齐多行文本

Question

在span元素内部垂直对齐多行文本

3

我昨天和今天花费了无数个小时来弄清楚如何做到这一点。我简直不敢相信CSS没有一个简单的方法来处理这个问题。

本质上，我有一些文本在 span class="name" 中，它的长度不是固定的。在某些情况下，它可能会溢出到下一行。如何在我的容器内垂直对齐它呢？

更具体地说，在我的容器内如何垂直对齐 "ABC Father And Sons Company LLC"？ http://jsfiddle.net/D3L8S/

<div class="container">
  <span class="name">ABC Father And Sons Company LLC  </span>
  <a href="#" class="addr">Address</a>
  <a href="#" class="hours">Hours</a> 
  <a href="#" class="more">More</a> 
</div>

CSS类

// CSS
.container {
    background: #DDEBF0;
    padding: 11px;
    border: 1px solid #D2D2D2;
    width: 380px;
    margin-bottom: 10px;
    height:18px;
    line-height:18px;
    display:inline-block;
}

.name {
    width:200px;
    float:left;
}

.addr, .hours, .more {
    width:60px;
    float:left;
}

如果我给“name”添加一个负的上边距（margin-top：-8px），我就可以实现这个效果，但显然会破坏XYZ公司有限责任公司的呈现 http://jsfiddle.net/FM4dA/ 最好的解决方案应该是跨浏览器兼容的（至少ie8应该支持）

编辑-我最初忘记提到我的容器宽度是固定的，无法更改。

- user3573508

你的 div 的 padding 把文本往下推。 - j08691

http://jsfiddle.net/FM4dA/3/？ - user3644644

@j08691 - 感谢您的评论。但我需要容器的填充。此外，如果我只是删除填充，它会将文本简单地推出容器的阴影边界。如果我误解了您的建议，请详细说明。 - user3573508

@İnekŞaban - 谢谢。实际上我的容器大小必须是固定的。抱歉，我在原帖中应该提到这一点。 - user3573508

我的意思是，你的填充和高度不足以使多行内容垂直居中。 - j08691

4个回答

1

垂直对齐div内容的一种方法是使用vertical-align CSS属性。但这仅适用于display:table-cell元素。因此，将容器包装在display:table div中，并将容器显示更改为display:table-cell。

像这样：http://jsfiddle.net/D3L8S/2/

- LcSalazar

table-cell是一种很好的方法。您不需要使用display: table包装器（试试吧！），因为CSS引擎会创建一个匿名表元素来根据需要包装表单元格。 - Marc Audet

1

谢谢@LcSalazar。这看起来好多了。有几个问题：1）有没有办法使两个容器的高度相同？2）这在ie8中支持吗？ie7呢？ - user3573508

感谢@Marc Audet指出这一点。虽然在某些浏览器版本中实际上需要指定包装器div，但在大多数浏览器中，您确实不需要这样做。 - LcSalazar

div的高度问题在于可能会出现单词换行，从而增加高度。您可以通过向div添加“white-space: nowrap”属性来防止这种情况发生。当然，这样做会增加宽度大小。 - LcSalazar

谢谢 @LcSalazar。不幸的是，我无法增加宽度，所以nowrap无法起作用。我希望有一种方法可以强制容器的高度保持统一。 - user3573508

1

试试这个，可能会对某些人有帮助

.name {
    width:200px;
    float:left;
    margin-top:-8px;
    word-wrap:break-word;
    text-align: center;
}

演示

- prime

0

当您想要垂直居中多行文本时，请将文本放入内联块中，然后假装内联块是单行文本。

 .container {
    background: #DDEBF0;
    padding: 11px;
    border: 1px solid #D2D2D2;
    width: 380px;
    margin-bottom: 10px;
    height: 18px;
    line-height: 18px
    display:inline-block;
 }

 .name {
     width:200px;
     float:left;
     margin-top:-8px;
     display: inline-block;
     vertical-align: middle;
     line-height: 14px;
 }

注意：

为什么要添加行高属性？

如果您向元素添加高度，那么其中的文本将位于哪里？也就是说，如果您有一个字体大小为10px（理论高度：10px）的文本块，它位于一个高度为60px的容器内，那么文本将会在哪里结束？最可能在容器的顶部，因为文本只能定位在文本流动的位置，即在高度为10px的空间内。但是，您可以通过使用与容器相同高度的行高值来克服这一点，这样文本将采用垂直对齐属性并正确对齐自身。

- MCHAppy

谢谢MCHAppy，我想你的解决方案跟@Marc Audet提供的相似，并且也应该有效。我很感激！ - user3573508

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Audet · Accepted Answer

这是使用内联块的一种方法：

.container {
    background: #DDEBF0;
    padding: 11px;
    border: 1px solid #D2D2D2;
    width: 380px;
    height: 50px;
    line-height: 50px;
    margin-bottom: 10px;
    display:inline-block;
}

.name {
    width:200px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.addr, .hours, .more {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

首先，请确保为多行名称留足垂直空间，因此在.container上，我使用了height: 50px和line-height: 50px。

然而，您需要重置子元素上的line-height: 1（或某个合适的值），否则行间距将不会很吸引人。

然后，不要使用浮动，而是在子元素（.name、.addr、.hours、.more）上使用display: inline-block和vertical-align: middle。

请参见演示：http://jsfiddle.net/audetwebdesign/Wp84v/ 注意：您可能不需要指定.addr、.hours、.more上的宽度，因此我让宽度采用收缩到适合值的方式。