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

テキストの制御を維持するために、テキストを説明内で折り返す必要があります。

問題を解決するために実装する方法のjsfiddlefloatの例を次に示します。

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 に答える