Html 对中包含img和h2的两个DIV？

我正在尝试对齐页面标题旁边的一个小图像（徽标），我希望这两个项目居中（理想情况下，标题居中，图像位于标题旁边）。然而，无论我尝试什么，我似乎都无法让它工作。以下是一个示例：

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

这似乎只是划分了页面，使页眉从左边开始得到40%，然后图像得到10%。我尝试在图像上使用z-index:-1，然后如果我使用文本对齐：居中，我可以将标题居中。但是，我必须给图片一个位置：绝对或相对，如果用户放大或缩小，这个位置不起作用

---

我如何解决这个问题？如何使标题居中，并使图像显示在标题旁边（有点固定在标题的“末端”），或使两者共享中心？

img

是内联元素，因此应指定

文本对齐：居中到父块元素。假设您有这样的标记：

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

img
是内联元素，所以您应该指定
text align:center到父块元素。假设您有这样的标记：

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

像这样的怎么样：

<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;
}


大字标题
#容器{
宽度：800px；
保证金：0自动；
文本对齐：居中；
}
#容器h2，#容器img{
显示：内联；
}

还有JSFIDLE-
像这样的东西怎么样：

<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;
}


大字标题
#容器{
宽度：800px；
保证金：0自动；
文本对齐：居中；
}
#容器h2，#容器img{
显示：内联；
}

和jsfiddle-
1）将h2和img包装在一个div中（让我们称之为容器），并使
display:inline block
在同一行中显示h2和img

2） 然后使用
text align:center

HTML:

1）将h2和img包装在一个div中（我们称之为容器），并使
display:inline block
在同一行中显示h2和img

2） 然后使用
text align:center

HTML:

我想你是在尝试这个

HTML

<div class="out">
    <div class="inline">
        <h2>TEST</h2>
    </div>
    <div class="inline">
        <img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
    </div>
</div>

更新了
我想你正在尝试这个

HTML

<div class="out">
    <div class="inline">
        <h2>TEST</h2>
    </div>
    <div class="inline">
        <img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
    </div>
</div>

更新的
试试这个

<div id="center">    
<h2>Headline</h2>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>


大字标题

试试这个

<div id="center">    
<h2>Headline</h2>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>


大字标题

HTML:

<div>    
    <h2>Headline</h2>
    <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>

h2, img {
    display:inline;
}
h2 {
    margin: 0;
    line-height: 100%;
}
img {
    vertical-align: middle;
}

HTML:

<div>    
    <h2>Headline</h2>
    <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>

h2, img {
    display:inline;
}
h2 {
    margin: 0;
    line-height: 100%;
}
img {
    vertical-align: middle;
}

标签已被弃用：@user2885726现在中心只是一个id，您可以将其更改为任何所需的名称谢谢！此方法帮助了我：）
标签已被弃用：@user2885726现在中心只是一个id，因此您可以将其更改为任何所需的名称谢谢！这个方法帮助了我：）这会使两个项目居中，但不会在同一行。@user2885726我已签入Chrome，IE和FF都显示在同一行并居中？您使用哪种浏览器和版本？尝试添加
显示：内联块同样，我将尝试在h2中添加它。谢谢你的提示：）很好地将图像放入h2中。谢谢现在是真正的挑战：你知道一种方法来锚定图像旁边已经居中的项目？假设我们在页面的中间有一个居中的图像，有没有办法添加一个对象，使其在居中的项目旁边排列，而不影响居中的项目？这会使两个项目居中，但不会在同一行。@user2885726我已签入Chrome，IE和FF都显示在同一行并居中？您使用哪种浏览器和版本？尝试添加
显示：内联块同样，我将尝试在h2中添加它。谢谢你的提示：）很好地将图像放入h2中。谢谢现在是真正的挑战：你知道一种方法来锚定图像旁边已经居中的项目？假设我们在页面中间有一个居中的图像，有没有一种方法可以添加一个对象，使其在居中项目旁边排列，而不影响居中项目？谢谢！尽管如此，该解决方案似乎不会将页面上的标题和图像作为一个整体居中，也就是说，如果用户放大或缩小，它会发生变化，但它们不会在屏幕上居中显示。不过，它确实将元素排成一行，这对我来说更进一步。谢谢！尽管如此，该解决方案似乎不会将页面上的标题和图像作为一个整体居中，也就是说，如果用户放大或缩小，它会发生变化，但它们不会在屏幕上居中显示。但是，它确实将元素排成一行，这对我来说是更进一步的一步。