将左浮动 div 中的图像与右浮动 div 上的文本垂直对齐

Posted 2023-03-05

【中文标题】将左浮动 div 中的图像与右浮动 div 上的文本垂直对齐

【英文标题】：Vertical aligning an image in a left floated div with text on a right floated div

【发布时间】：2012-02-18 22:02:10

【问题描述】：

我遇到了这个问题，我在内容页面上有 2 个 div（在内容包装器中），我无法让图像与旁边的文本对齐。

.text-blockposition:relative; float:right; width:70%; height:auto

然后我有图像：

.img-blockposition:relative; float:left; vertical-align:middle;

不确定是否可以将图像与文本对齐，但它们位于不同的 div 中。

【问题讨论】：

垂直对齐是什么意思？图片应该在文字的中间（上下边距一样）？还是在顶部？还是在底部？

嗨熵，我的意思是让图像与中间的文本对齐（不在文本内）垂直对齐：中间；工作时默认执行。

我认为你不能仅使用 CSS 来做到这一点。

【参考方案1】：

在这里，我将文本垂直对齐为图像 div 旁边的中间。只使用 CSS，不使用 javascript。

Text Vertical Align Middle - Sample

希望这是您期望的结果...

如果你还在寻找更多的东西，请发表评论...

【讨论】：

嗨，刚刚通过这篇文章，因为我有类似的问题，我正在尝试做同样的事情，但我希望文本垂直居中在浮动的 div 内（使用 float:left），我的只要我不浮动 div，文本就会居中，一旦我做文本出现在顶部