0

h1 が css でページのサイズ変更をラップしている場合でも、h1 以外の画像を垂直方向に中央揃えするにはどうすればよいですか? ここでjsfiddleを参照してください-> http://jsfiddle.net/JJvG6/

HTML :

<div>
  <div id="img"><img></img></div>
  <div id="h1"><h1>This Div and the div with the picture should always be vertically centered, when page resizes and h1 wraps.</h1></div>
</div>

CSS :

div {
    margin: 5px;
    border: 1px solid black;
}

div #img {
    float: left
}

ありがとう

4

2 に答える 2

2

テーブルを使用して問題を解決する方法を示すために Shredder が使用したいくつかのコードに基づいて、代わりにテーブル以外の要素を使用display: tableして anddisplay: table-cell (および必要に応じて他のdisplay値) を適用し、セマンティクスに依存しない要素を使用して同じものを作成できます。

<div>(テーブル CSS のブラウザーのデフォルト値のため、2 つの例の間隔がわずかに異なることに注意してください。代わりに sを使用しても、余分なスペースはありません)

html

<div>
    <div><img src="http://31.media.tumblr.com/avatar_207d7520c3c8_128.png" /></div>
    <div><h1>This Div and the div with the picture should always be vertically centered, when page resizes and h1 wraps. And this text could go on for who knows how long.. blah blah blah. random text And this text could go on for who knows how long.. blah blah blah. random text</h1></div>
</div>

CSS

div {
    display: table;
}

div > div {
    display: table-cell;
    vertical-align: middle;
}
于 2013-09-20T22:40:50.657 に答える
0

長期的な css/html の目標がここにあるかどうかはわかりませんが、おそらくテーブル (/frets) がこの状況でより役立つでしょう..

<table>
    <tr>
        <td><img src="http://31.media.tumblr.com/avatar_207d7520c3c8_128.png" /></td>
        <td><h1>This Div and the div with the picture should always be vertically centered, when page resizes and h1 wraps. And this text could go on for who knows how long.. blah blah blah. random text And this text could go on for who knows how long.. blah blah blah. random text</h1></td>
    </tr>
</table>

jsfiddle

于 2013-09-20T21:50:57.367 に答える