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

Question

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

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

演示http://jsfiddle.net/LBUyS/

Answer 1

将-ve值用于

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

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

Answer 2

这是使用CSS表格单元格的一种方法。

对于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类似于对包裹p元素的div.text所做的操作。

应用以下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 

对于image和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/