Image和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/ 注意：删除标记之间的空白区域以避免内联块元素添加不需要的空间。

.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/

使用包装元素上的相对定位，我们可以使用垂直居中文章名称的绝对位置方法。

Answer 3

让孩子div inline或inline-block

一个简单的例子如下：

HTML：

<div >
  <img src="myimg.png" />
  <div class="child-div1">My div content</div>
</div>

CSS：

.child-div1 {
    display: inline-block;
}

希望有所帮助。