html - 除了h1之外，如何垂直居中图像？

Question

即使 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
}

谢谢

Answer 1

Based on some code Shredder used to show how using a table would solve the problem , 你可以改为 use non-table elements and apply display: table and display: table-cell (和 other display values 必要时)使用语义中立的元素创建相同的东西。

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