Css 垂直对齐图像

我有一个div，其中包含一个图像和一个p标记（见下图）。我想垂直排列div中间的图像，这取决于段落是多少行。垂直对齐不起作用。我现在正在使用JavaScript来计算要添加多少到边距顶部，但更愿意使用CSS。有什么想法吗

<div>
    <img>
    <p>Multi-line</p>
</div>

多线

添加

---

这是一种两栏式的工作吗？（图像向左，文本向右）

如果是这样的话，您当然可以将每个元素粘贴到它自己的div中

<div>
    <div style="width:100; float:left"><img /></div>
    <div style="width:100; float:left"><p>multiline</p></div>
</div>

多行

---

想想看，这样做可以实现您的目标，给图像显示：block，float:left和vertical align:middle。或者，给它一个与包含元素相同的行高。

尝试将

p

元素的

行高属性设置为图像的高度，例如：

div p {
  line-height: 18px;
}

编辑：刚刚意识到我误读了问题，错过了
p
将是多行的事实。尝试的一个选项是完全删除
img
元素，并将其设置为
p
的
背景图像
，其中
背景位置位于
左侧，居中。比如：

div p {
  background: transparent url(path/to/img) no-repeat left center;
  padding-left:30px; /* Set based on width of image */
}

CSS垂直对齐属性仅适用于表格单元格和内联元素。由于默认情况下段落标记指定块元素，因此它不执行任何操作。为了使文本如您所描述的那样对齐，您必须将div分成两个容器或使用一个表。这里有一个很好的页面可以帮助您更好地理解：
也许解决方案会有所帮助。
这是纯CSS，垂直对齐图像，如果图像比包含框高（或宽），还可以向下调整图像大小。因此，在不破坏垂直对齐的情况下，长方体和图像可以是任意大小。此外，您可能希望在
标记中添加一个左边距，以防止它们被图像隐藏

CSS

/*定位*/
.绝对中心包装{
位置：相对；/*包含div中的图像*/
}
.absoluteCenter{/*垂直对齐图像*/
保证金：自动；
位置：绝对位置；
排名：0；
底部：0；
}
.absoluteCenterWrapper p{/*将推送到图像边缘*/
左边距：101px；/*图像宽度*/
}
.absoluteCenter{/*指定图像的宽度，以避免图像更改时重叠*/
宽度：101px；/*图像宽度*/
}
/*调整大小-调整大小以避免切断*/
绝对中心{
最大高度：100%；
最大宽度：100%；
}
/*让它“漂亮”*/
.绝对中心包装{margin:1em；padding:0.001em；/*已浮动，可能应该将其添加到中。我让图像向左浮动，而p带有一个边距。这是否只保留在左上角？这是一个很好的解决方案。但是，在我的示例中，图像将更改，而不是设置的图像。您可以始终将背景图像属性设置为inline style:
多行
我也可以将动态设置为具有不同图像的特定类。如果您尝试设置图像样式（即：如果我的图像有边框），这将不起作用。这是一个漂亮的解决方案-非常感谢您的分享！它工作得很好，而其他任何东西似乎都不起作用。向上投票！就记录而言，对我来说，只需使用
margin:auto；position:absolute；top:0；bottom:0；
就足够了。我将图像放在绝对包装中，而不是相对包装中。
absolute
和
relative
导致孩子们的行为方式是一样的，所以两者都可以接受。至于排除
最大高度
/
最大宽度
，只有当你知道你的图像永远不会比容器更宽/更高时，这才行得通。而且把它放在里面不会伤害任何东西。安全总比抱歉好：PI需要添加
左：0；
和
右：0。我猜这是因为direct容器没有指定宽度？！不管怎样，它可能会帮助某人。很好，把它塞进我的工具带。这不会垂直对齐它们。
div p {
  background: transparent url(path/to/img) no-repeat left center;
  padding-left:30px; /* Set based on width of image */
}