居中包含img和h2的两个div？

Question

我正在尝试在我的页面上的标题旁边对齐一个小图像(徽标)，我希望这两个项目居中(理想情况下，标题应该居中，图像应该在标题旁边)。然而，无论我怎么尝试，我似乎都不能让它工作。下面是一个示例：

<h2>Headline</h2>
<img src="logo.jpg">

现在，我在这里尝试了几种方法。我试着给h2一个带有id的div，以及一个带有另一个id的div --然后给它们设置宽度并浮动它们。这至少让他们站在了同一条线上，但不是我想要的方式。

我还尝试将这些div包装在另一个div中，如下所示：

#container {
width: 800px;
margin: 0 auto;
}

#h2div {
width: 40%;
float: left;
}

#imgdiv {
width: 10%;
float: left;
}

这似乎只是将页面分开，使标题从左侧开始获得40%，图像从左侧开始获得10%。我尝试在图像上使用z-index：-1，如果我随后使用text-align: center，我可以将标题居中。但是，我必须给图片一个位置:绝对的或相对的，如果用户放大或缩小，它就不能很好地工作。

我该如何解决这个问题？我如何让标题居中，以及在标题旁边显示的图像(某种程度上锚定到标题的“结尾”)，或者让两者共享中心？

Answer 1

这样如何：

<div id="container">
    <h2>Headline</h2>
    <img src="logo.jpg">
</div>

#container {
    width: 800px;
    margin: 0 auto;
    text-align: center;
}
#container h2, #container img {
    display: inline;
}

和jsfiddle - http://jsfiddle.net/Ygz4t/

Answer 2

img是内联元素，因此应将text-align:center;指定给父块元素。假设你有这样的标记：

<div id="imgdiv">
    <img src="logo.jpg">
</div>

您的CSS可能如下所示：

#imgdiv {
    text-align: center;
}

Answer 3

1)将h2和img包装在一个div内(称其为容器)，并制作display: inline-block，使h2和img在同一行显示

2)然后使用text-align: center

HTML：

<div id="container">    
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>

CSS：

body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
    text-align: center;
    width: inherit;
}
h2, img {  
    display: inline-block;
}

JSFiddle