Question

我使用max-width属性强制换行。在新行之后，文本将移到图像的底部而不是保留在中间。

CSS：

.description{
font:bold 16px Verdana, Helvetica, sans-serif;
color: #3D85A7;
margin: 0 auto 20px auto;
text-align:center;
max-width:500px;
}

.icon{
max-height: 90px;
max-width: 85px;
margin: 10px 0 10px 10px;
vertical-align:middle;
}

HTML：

<div class="description">
    <img class="icon" src="http://cleanfiles.net/images/pdf.png">
    This is a really really really really long file name.pdf
</div>

对于实例，view it on a JSFIDDLE here.

增加：还请注意我的当前 css适用于短文件名（图标移入并保持居中）。到目前为止，答案涉及float:，这似乎不适用于较短的文件名。

Answer 1

我的解决方案是将HTML更改为（添加<p>标记）：

<div class="description">
  <p>
    <img class="icon" src="http://cleanfiles.net/images/pdf.png">
    This is a really really really really long file name.pdf
  </p>
</div>

然后将属性float: left添加到图片中。

修改

这是以文字为中心的链接（可能不是最好的方式，但它有效）：http://jsfiddle.net/LXS6x/9/

Answer 2

您应该将文本包装在说明中，以便控制文本。

以下是jsfiddle示例，说明如何实施float来解决您的问题。

<强> CSS

.description{
  font:bold 16px Verdana, Helvetica, sans-serif;
  color: #3D85A7;
  margin: 0 auto 20px auto;
  text-align:center;
  max-width:500px;
}

.description p {
  display: inline-block;
  float: right;
  max-width: 390px;
  margin: 10px 10px 10px 0px;
}

.icon{
  max-height: 90px;
  max-width: 85px;
  margin: 10px 0 10px 10px;
  float: left;
}

我希望这会有所帮助。

Vertical-Align中间停止在换行后工作

2 个答案: