当旁边有<img rel="nofollow noreferrer" />时,如何将<h1>置于中心位置？

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/