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://codepen.io/the_ruther4d/pen/695e1228a4efa13ee3e5551687c66247/

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

Answer 2

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 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;
}

希望有帮助。

Image和Div - 并排

3 个答案: