左浮动图像后垂直居中文本答案

【问题标题】：vertically center text after a left floated image左浮动图像后垂直居中文本
【发布时间】：2012-07-31 22:03:59
【问题描述】：

<img style="float:left" src="image.jpg"> <center>text</center>
<hr style="clear:both">

我想用上面的代码实现的是让一个图像向左浮动，文本垂直居中（而不是像现在这样放置在顶部）和水平居中，然后在图像和文本之后是一个水平条，用于将图像和文本与我的其他内容分开。我不知道如何垂直居中文本而不做一些时髦的东西，比如单行和单列的表格。

【问题讨论】：

【解决方案1】：

试试这个example

如果您的图像所在区域的高度固定，那么您可以给出

line-height = the height of the image 将文本垂直居中放置

【讨论】：

【解决方案2】：

<div>
<img style="float:left" src="image.jpg">text
</div>

img
{
  vertical-align:middle;
}

【讨论】：

为什么不加<div style="text-align:center;">？因为他想要水平居中的文本。
不幸的是，这不起作用。请注意我的代码中的
栏，它具有 clear:both 样式。我认为它的存在会与垂直对齐方式混淆，但我需要清除文本之后的内容，以免它侵占图像和文本区域。