css - 图像和 Div - 并排

Question

我想创建一个设置，其中左侧有一个图像，右侧有一个 div。我正在使用 float left 来完成此操作，但我希望右侧的 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/
注意:删除标签之间的空白以避免行内 block 元素添加不需要的空间。

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