如何垂直对齐运行多行的文本 [英] How to vertical-align text that runs multiple lines

问题描述

我意识到可能有几个问题的题目与此类似，但我认为我的问题有点不同，我试着做一些背景阅读，但似乎无法（尽管这可能是因为不存在）

基本上，我有三个盒子，每个盒子左边都有一个图像，一些文本在其中，问题是让文本垂直对齐，已经完成了一些关于垂直对齐实际工作的背景知识（我之前并不完全确定），我尝试实现它来解决问题，并且它完美地工作除了其中一个盒子外，你会在下面的演示中看到我的意思：

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

最后一个框有第二行文字，而这条线只是在图像下方结束，我可以想到这样做的几种方法，但大多数涉及使用浮动图像和最后一个盒子文本的边距，它们在工作时并不是一个特别好的方法（嗯，我认为无论如何。 。 。）

是否有这样做的优雅方式，以便文本将保留在框的中间，而不考虑行数/字体大小决定使用？

如果我必须使用我的原始解决方案，我很高兴做到这一点，我只是想看看是否有更好的方法来做到这一点我还没有发现。

解决方案

基于针对类似问题提出的解决方案这里，你可以做这样的事情。

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

  .main-services {overflow：auto; padding：17px 0 9px 0;}。main-services li {list-style：none;向左飘浮; border-right：1px虚线＃E53B00; padding-right：14px;}。main-services li a {display：block;身高：78px;颜色：＃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-常见的> < li class =service-1> < a href =＃> < img src =http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpgalt =blah/> < span>一些文字在这里< / span> < / A> < /锂> < li class =service-2> < a href =＃> < img src =http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpgalt =blah/> < span>更多文字< / span> < / A> < /锂> < li class =service-3> < a href =＃> < img src =http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpgalt =blah/> < span>更多文字在此处显示，但此文字超出< / span> < / A>或者退房< / ul>  

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

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

I realise there have probably been a few questions with a title similar to this, but I think my 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:

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

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.

解决方案

Based on a proposed a solution for a similar problem here, you can do something like this.

1. Put the link texts inside spans.
2. Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.

.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/

Note: this won't work in IE8.

这篇关于如何垂直对齐运行多行的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！