3

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

4

2 回答 2

2

我的解决方案是将 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/

于 2012-12-15T22:15:56.347 回答
0

您应该真正将文本包装在描述中,以保持对文本的控制。

这是一个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;
}​

我希望这有帮助。

于 2012-12-15T22:18:21.360 回答