Html 如何垂直对齐运行多行的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9443712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertical-align text that runs multiple lines
提问by Sean
I realise there have probably been a few questions with a title similar to this, but I thinkmy question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
我意识到可能有几个问题的标题与此类似，但我认为我的问题有点不同，我尝试进行一些背景阅读，但似乎无法在任何地方找到优雅的解决方案（尽管那可能是因为一个不存在）
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
基本上，我有三个框，每个框的左边都有一个图像，其中有一些文本，问题是让文本垂直对齐，已经做了一些关于垂直对齐实际工作原理的背景阅读（我不完全是之前确定）我尝试实施它来解决问题，它在除一个盒子之外的所有盒子上都运行良好，您将在下面的演示中看到我的意思：
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
最后一个框有第二行文本，这一行刚好在图像下方，我可以想到几种方法，但大多数涉及为图像使用浮点数，并为最后一个文本使用边距盒子，虽然工作并不是一种特别好的方式（好吧，无论如何我都这么认为......）
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
有没有一种优雅的方法来做到这一点，无论我决定使用多少行数/字体大小，文本都会保留在框的中间？
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
如果我必须使用我的原始解决方案，我很高兴这样做，我只是想看看是否有更好的方法来做到这一点，我还没有发现。
采纳答案by Mr Lister
Based on a proposed a solution for a similar problem here, you can do something like this.
基于此处针对类似问题提出的解决方案，您可以执行以下操作。
- Put the link texts inside spans.
- Give these spans
display:inline-blockand the proper widths; which are the original widths of the li items minus the images and the paddings.
- 将链接文本放在跨度内。
- 给出这些跨度
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>Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
或查看小提琴的更新（包括原始重置样式表）：http: //jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.
注意：这在 IE8 中不起作用。
回答by Hades
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
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>
vertical-alignin CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
vertical-align在 CSS 中，将应用它的内联元素与其周围的其他内联元素对齐。只有在表格上它才会在表格单元格内对齐。
