垂直居中使用CSS圖像右側的標題

我試圖用CSS實現此佈局（我猜沒有任何表格）。有任何想法嗎？垂直居中使用CSS圖像右側的標題

PUPPY!!

來源

2010-11-19 Tom Lehman

我幾乎想對使用Comic Sans的這個問題進行降級投票。 :) http://bancomicsans.com/main/ – Robusto 2010-11-19 00:57:01

是的，但我認爲這是使用這些wireframing工具之一..仍然..誘人。 – Hamish 2010-11-19 01:07:22

我在Balsamiq（它是黑板，而不是漫畫無） – 2010-11-19 02:12:54

有幾件事情可以做，但它取決於問題的具體情況。幾個問題：

照片總是一樣的高度？
是否總是隻有一行文字，還是可能有幾行換行？
文本是block還是inline level元素？

如果照片始終是相同的高度，而且也只有一行文字，您可以設置文本等於照片的大小line-height，然後將照片設置爲float:left。

如果可能有多行文本，則可能需要使用inline-block元素並使用javascript計算頂部邊距。

編輯：不幸的是，這不能單獨使用CSS來完成，因爲塊級元素沒有允許垂直居中。下面是將文本中的任意長度的div任何尺寸的照片一起工作的例子：http://jsfiddle.net/W7b4U/39/

HTML

<img src="http://placehold.it/100x150"> 
<div class="align">align this align this align this align this align this align this align this align this align this align this align this align this align this align this align this </div>

CSS

img {float: left;}

使用Javascript/JQuery的

$(document).ready(function() { 
    var $text = $('.align'); 
    var $img = $('img'); 
    var margin = ($img.outerHeight() - $text.outerHeight())/2; 
    var textPadding = 10; 
    $text.css({marginTop: margin, marginLeft: $img.outerWidth() + textPadding}); 
});

來源

2010-11-19 00:55:33 markquezada

照片並不總是一樣的高度;可能有幾條包裝線;文本可以是塊或內聯（取決於上下文） – 2010-11-19 02:16:03

查看上面的代碼。不知道你是否熟悉jQuery，但我試圖讓它容易遵循。基本上它只是計算頁面加載中文本所需的邊距。不是最佳的，但它的工作原理。 – markquezada 2010-11-19 03:10:29

尼斯：這是正確的行爲。這是值得使用JS的呢？是否有可用於IE7 +/IE8 +的純CSS版本？我可以通過內嵌塊元素來實現嗎？ – 2010-11-19 05:25:25