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

我想把一个图像放在两段文字的左边，这样文字就垂直居中于图像的高度

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

第1行

第2行

演示

使用-ve值

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

---

但是，在媒体查询中也要小心。使用

%

而不是

PX

。希望这能解决问题。

这里有一种使用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>

将

display:table

应用于包装器，然后将

display:table cell

应用于两个子

div

使用

vertical align:top

属性将图像设置为其父元素的顶部，然后使用

vertical align:middle

将段落定位到右侧表格单元格元素的中间

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

请参见演示：使用

float:left 

用于图像和p标记。 然后

p标签符合你的愿望

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

---

是否尝试添加

垂直对齐：中间也到
img
？
margin-top 

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