我正在使用一个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:
,这似乎不适用于较短的文件名。