<h1> 当旁边有一个 <img /> 时，我该如何居中？

Question

我在CSS中创建一个像样的头时遇到问题。我想要的是一个<h1>标头，它将其内容与其父<div>的中心对齐。有时，可能会有一个附加的徽标显示为常规<img />，该徽标应与左侧对齐。

这是我的示例代码：

<div class="container">
    <div class="logo">
        <img src="http://www.oldfirestation.co.uk/logo_brand_example_86.jpg" />
        <h1>Not center?</h1>
    </div>
    <div class="more">
        This is the center
    </div>
</div>

还有我的CSS：

body {
    background-color: #161616;
}
div.container {
    background-color: #fff;
    width: 70%;
    margin: auto;
}
div.logo img {
     width: 200px;   
    float: left;
}
h1 {
    text-align: center;
    font-size: 1.4em;
    margin: 0px auto;
    padding: 0px 0px 5px 0px;  
    width: 50%;
}
div.more {
    text-align: center;
    margin-top: 50px;
    clear: left;
}

问题是，当我显示<img />时，我的<h1>文本是NOT居中的。如果我删除此<img />，它就是……我该如何修复它？？

我在JSFiddle上做了一个例子：http://jsfiddle.net/8B9ZF/

Answer 1

你喜欢这样：

div.logo img {
     width: 200px;   
    vertical-align:middle;
}
h1 {
    text-align: center;
    font-size: 1.4em;
    margin: 0px auto;
    padding: 0px 0px 5px 0px;  
    width: 50%;
    display:inline-block;
}

http://jsfiddle.net/8B9ZF/8/

也许你可以更改你的标记

http://jsfiddle.net/8B9ZF/24/

Answer 2

如果你让图像绝对位于0,0而不是浮动，那么它就不会把H1推离中心。但是，如果图像太宽或标题的容器太小，则会出现图像与文本重叠的危险。为了应对这种情况，您可能需要在容器的左/右添加一些填充

Answer 3

http://jsfiddle.net/8B9ZF/27/

据我所知，这应该一直有效！基本上，这只是添加了隐藏的溢出，这使h1意识到浮动元素占用的空间，因此它占据了剩余的区域！

body {
    background-color: #161616;
}
div.container {
    background-color: #fff;
    width: 70%;
    margin: auto;
}
div.logo{
overflow:hidden
}
div.logo img {
     width: 200px;   
    float: left;
}
h1 {
    text-align: center;
    font-size: 1.4em;
    padding: 0px 0px 5px 0px;  
}
div.more {
    text-align: center;
    margin-top: 50px;
    clear: left;
}