0

除了h1之外，我如何垂直居中图像，即使h1使用css在页面调整大小时换行？在此处查看 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和display: table-cell（以及其他必要的display值）使用语义中性元素创建相同的东西。

<div>（请注意，由于表 CSS 的浏览器默认值，这两个示例的间距略有不同 - 如果使用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 回答