我正在使用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>
有关实时示例,请在此处的 JSFIDDLE 上查看它。
补充:另请注意,我当前的 css 适用于短文件名(图标移入并保持居中)。到目前为止,答案涉及float:
,这似乎不适用于较短的文件名。
我的解决方案是将 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/
您应该真正将文本包装在描述中以保持对文本的控制。
下面是一个 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;
}
我希望这有所帮助。