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

Answer 4

我想你正在尝试这个，

<强> 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>

<强> CSS

.out {
    width: 800px;
    margin: 0 auto;
}
.inline {
    display:inline-block;
}

更新了JSFIDDLE

Answer 5

试试这个

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

Demo Fidle

Answer 6

<强> HTML：

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

<强> CSS：

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

DEMO

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

6 个答案: