Question

我想将图像放在两段文字的左侧，使文字相对于图像的高度垂直居中。

<div class="wrap">
    <img src="https://i.imgur.com/Yako69m.jpg" />
    <div class="text">
        <p>line1</p>
        <p>line2</p>
    </div>
</div>

demo http://jsfiddle.net/LBUyS/

Answer 1

使用-ve value

 margin-top. 
margin-top: -12%;

但是，您还必须注意媒体查询。使用%代替PX。希望这会解决。

Answer 2

以下是使用CSS table-cells进行此操作的一种方法。

对于HTML：

<div class="wrap">
    <div class="img-panel">
        <img src="https://i.imgur.com/Yako69m.jpg" />
    </div>
    <div class="text">
        <p>line1</p>
        <p>line2</p>
    </div>
</div>

将图片包裹在div中，与您对包裹div.text元素的p所做的相似。

应用以下CSS：

.wrap {
    display: table;
    width: 80%; /* optional */
    margin: 0 auto; /* optional if you want to center wrapper */
}
.img-panel, .text {
    display: table-cell;
    border: 1px solid blue;
}
.img-panel {
    width: 20%;
    vertical-align: top;
}
.img-panel img {
    width: 100%;
    display: block;
}
.text {
    vertical-align: middle;
}
.text p {
    background-color: yellow;
}

将display: table应用于包装器，然后display: table-cell应用于两个子div。

使用vertical-align: top属性将图像设置为其父元素的顶部，然后使用vertical-align: middle将段落放置在右表格单元格的中间位置。

只要图像比右边的内容更高，您就可以获得所需的布局。

请参阅演示：http://jsfiddle.net/audetwebdesign/uG8G2/

Answer 3

使用

float:left

用于图像和p标签。那么

margin-top

p标签符合你的愿望。

http://jsfiddle.net/LBUyS/3/

Answer 4

使用CSS flexbox（可能希望添加供应商前缀以获得更好的浏览器支持）：

.wrap {
    display: flex;
    align-items: center;
}
img {
    width:20%;
}

http://jsfiddle.net/teddyrised/LBUyS/4/

垂直对齐多个<p>相对于图像高度</p>

4 个答案: