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

当旁边有<img/>时，如何将<h1>置于中心位置？</h1>

3 个答案:

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

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