如何垂直排列多行文字

我意識到可能有幾個題目與此類似，但我認爲我的問題有點不同，我試着做一些背景閱讀而似乎無法找到一個優雅的解決這個任何地方（儘管這可能是因爲一個不存在）如何垂直排列多行文字

基本上，我有三個箱子，每個圖像的左側，並在其中一些文本中，問題是讓文本垂直對齊，做了一些關於垂直對齊實際如何工作的背景知識（我之前並不完全確定）我嘗試實現它來解決問題，並且它在除了在下面的演示中，你會看到我的意思：

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

如何垂直排列多行文字

回答

相關問題