html - 垂直对齐跨度内的多行文本

Question

我昨天和今天花了无数个小时来弄清楚如何做到这一点。我不敢相信 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;
}

如果我为“名称”添加一个负的上边距 (margin-top:-8px)，我可以做到这一点，但它显然会扰乱 XYZ Company LLC 的渲染 http://jsfiddle.net/FM4dA/

理想情况下，该解决方案应该是跨浏览器兼容的(至少 ie8 应该支持它)

编辑 - 我忘了一开始就提到我的容器宽度是固定的，无法更改。

Answer 1

这是使用内联 block 的一种方法:

.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(或一些合适的值)，否则行间距将不美观。

然后，不使用 float ，而是使用 display: inline-block 和 vertical-align: middle子元素(.name、.addr、.hours、.more)。

参见演示:http://jsfiddle.net/audetwebdesign/Wp84v/

注意:您可能不需要在.addr、.hours、.more上指定宽度，所以我让宽度采用收缩至适合值。