圖像和Div - 並排

Question

我想創建一個設置，其中有一個圖像在左邊和div在右邊。我正在使用float來完成這個任務，但我希望正確的div具有與左側圖像相同的高度，並且要使文本垂直居中。

這裏是一個jsfiddle

<img class="half" src="http://placekitten.com/200/300"> 
<section class="articlename">Gangstas Drinkin</section> 

... 

.half{float:left;width:50%;} 
.articlename{width:50%;background-color:black;float:left;color:white;} 

所以開始我想貓須在頁面的50％，另外50％是黑色文本和右側需要匹配的高度圖片。

這可能嗎？

Answer 1

http://jsfiddle.net/Dyt2X/23/
http://fiddle.jshell.net/Dyt2X/23/show/
注：去除標籤之間的空白，以避免inline-block的元素添加多餘的空格。

.wrap { 
    display:inline-block; 
    background-color:#000; 
} 
.half, 
.articlename { 
    display:inline-block; 
    width:50%; 
    vertical-align:middle; 
} 
.articlename { 
    color:#fff; 
    text-align: center; 
} 

Answer 2

你可以做這樣的事情： http://codepen.io/the_ruther4d/pen/695e1228a4efa13ee3e5551687c66247/

我們可以使用的垂直居中的ArticleName的絕對位置方法的包裝元素上使用相對定位。