Question

我怎样才能将图像垂直居中于h1之外，即使h1在页面上用css调整大小？请参阅这里的jsfiddle - ＆gt; 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;
}

Answer 2

不确定你的长期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

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

2 个答案: