如何垂直排列多行文字

我意识到可能有几个题目与此类似，但我认为我的问题有点不同，我试着做一些背景阅读而似乎无法找到一个优雅的解决这个任何地方（尽管这可能是因为一个不存在）如何垂直排列多行文字

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

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

最后一个框有文字的第二行，该行刚刚结束了在图像的下方，还有我能想到这样做的几种方法，但大多数涉及使用float型的图像，以及最后一个盒子的文本边距，这些文字在工作时并不是特别好的一种方式（嗯，我认为无论如何。。。）

是否有这样做的一个优雅的方式，这样的文本将保持在箱体的中间不管我使用决定行/字体大小的数量？

如果我必须用我原来的解决方案，我很高兴这样做，我只是兴趣看看是否有这样做的，我还没有发现一个更好的方式。

来源

2012-02-25 Sean

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

把链接文本里面跨度。
给这些跨度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工作。

来源

2012-02-25 11:59:46

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-align在CSS对齐它应用到与它周围的其他内联元素内联元素。只有在表格中它会在表格单元格内对齐。

来源

2012-02-25 12:00:18 Hades

如何垂直排列多行文字

回答

相关问题