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

如果我向“name”添加负上边距（margin-top：-8px），我可以实现这一点，但它显然会让XYZ Company LLC的呈现变得混乱 http://jsfiddle.net/FM4dA/

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

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

Answer 1

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

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

Answer 2

以下是使用内联块执行此操作的一种方法：

.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（或某个合适的值），否则行间距不会有吸引力。

然后，使用display: inline-block和vertical-align: middle代替浮点数子元素（.name，.addr，.hours，.more）。

请参阅演示：http://jsfiddle.net/audetwebdesign/Wp84v/

注意：您可能无需在.addr，.hours，.more上指定宽度，因此我让宽度采用缩小到适合的值。

Answer 3

如果要垂直居中多行，请将文本放入内联块，然后假设内联块是单行文本。

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

注：

Why you should add the line-height property ?

如果你为一个元素增加高度，那里面的文字到底在哪里？也就是说，如果你有一个font-size的文本块：10px（一个理论高度：10px）在一个60px的容器里，那么文本到底会是什么？最肯定的是在容器的顶部，因为文本只能在文本流动的位置定位，高度：10px空间。但是你可以通过使用与容器相同高度的行高值来克服这个问题，这样文本将采用vertical-align属性并正确对齐。

Answer 4

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

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

DEMO

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

4 个答案: