Question

我意识到可能有一些问题与这个类似的标题，但我认为我的问题有点不同，我试图做一些背景阅读，似乎无法在任何地方找到一个优雅的解决方案（虽然这可能是因为一个不存在）

基本上，我有三个盒子，每个盒子左边有一个图像，里面有一些文字，问题是让文本垂直对齐，做了一些关于vertical-align实际工作原理的背景知识（我不是之前我完全确定了。我尝试实现它来解决这个问题，并且除了其中一个盒子之外它在所有的盒子上运行得非常好，你会在下面的演示中看到我的意思：

http://jsfiddle.net/5vxSP/1/

最后一个方框有第二行文字，这条直线最终位于图像下方，有几种方法我可以想到这样做，但大多数方法都是使用浮动图像和文本边距最后一个盒子，虽然工作并不是一个特别好的方式（好吧，我想也是如此......）

是否有一种优雅的方式，这样文本将保留在框的中间，而不管我决定使用的行数/字体大小？

如果我必须使用我原来的解决方案，我很乐意这样做，我只是想知道是否有更好的方法可以做到这一点，我还没有发现。

Answer 1

HTML在垂直对齐方面非常粗制滥造。我发现可靠地执行此操作的唯一方法是执行以下操作...

<div>
    <span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

CSS中的

vertical-align将其应用的内联元素与其周围的其他内联元素对齐。仅在表格上它在表格单元格内对齐。

Answer 2

基于针对类似问题here提出的解决方案，您可以执行以下操作。

将链接文本放在spans中。
给这些跨度display:inline-block和适当的宽度;这是li项目的原始宽度减去图像和填充。

.main-services {
  overflow: auto;
  padding: 17px 0 9px 0;
}
.main-services li {
  list-style: none;
  float: left;
  border-right: 1px dashed #E53B00;
  padding-right: 14px;
}
.main-services li a {
  display: block;
  height: 78px;
  color: #ED5D04;
  text-decoration: none;
}
.main-services li a img {
  vertical-align: middle;
}
.main-services li a span {
  display: inline-block;
  vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }

<ul class="main-services border-common">
  <li class="service-1">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>Some text goes here</span>
    </a>
  </li>
  <li class="service-2">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>More text here</span>
    </a>
  </li>
  <li class="service-3">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>More text goes here but this text overruns</span>
    </a>
  </li>
</ul>

或查看小提琴的更新（包括原始重置样式表）：http://jsfiddle.net/MrLister/5vxSP/15/

注意：这在IE8中不起作用。

如何垂直对齐运行多行的文本

2 个答案: