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

Question

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

这是我的示例代码：

<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> 文本不居中。如果我删除这个<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;
}