1

デフォルトでは、テキストに沿った画像は、下が行の下に揃えられ、上が前の行の下に揃えられます。これにより、テキストの間隔が変更されます。

ここに画像の説明を入力

代わりに、画像をテキスト行の中央に配置したいと思いますが（たとえば、を使用vertical-align:middle）、間隔を歪ませることはありません。

ここに画像の説明を入力

ほとんどのブラウザに準拠した方法でこれを行うにはどうすればよいですか?

最小限の例として、次のマークアップを検討してください。

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <p>Some text</p>
    <p>Some text <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png" style="vertical-align:middle"> with an image </p>
  </body>
</html>
4

4 に答える 4

1

あなたの場合、私は次のようにします：

HTML:

<p>Some text</p>
<p>Some text <span class="mid-image"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png" style="vertical-align:middle" /></span> with an image</p>
<p>Some text</p>

CSS:

.mid-image {
    display: inline-block;
    zoom: 1;
    height: 1px;
}

.mid-image img {
    margin-top: -75px
}

フィドル: http://jsfiddle.net/QgutY/1/

そして読んでください：インターネットエクスプローラー7、6ではインラインブロックが機能しません

于 2013-07-16T21:04:25.960 に答える
1

別の解決策：

HTML (変更なし):

<p>A line</p>
<p>Another line</p>
<p>Another</p>
<p>Your (possibly) long line <span class="img-container"><img id="image" src="http://image.org/" /></span></p>
<p>One more line</p>

CSS (ポジショニングを使用):

.img-container {
    height: 0px;
    position:absolute;
}

#image {
    margin-left: 1em;
    position: relative;
    bottom: 63px;
}

どちらのソリューションも画像のサイズを知る必要があることに注意してください。

私の解決策（「position：absolute;」を使用）では、画像の幅を知って、その後にテキストを追加する必要があります。

これを行うには、画像の幅に等しいパディングで別のスパンを追加するだけです。codePen を参照してください: http://codepen.io/loxaxs/pen/mjFxJ/

于 2013-07-16T22:02:49.277 に答える