1

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

<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，我可以将标题居中。但是接下来我必须给图片一个位置：绝对或相对，如果用户放大或缩小，这效果不佳..

我该如何解决这个问题？我如何让标题居中，以及在它旁边显示的图像（有点锚定到标题的“结尾”），或者让两者共享中心？

4

6 回答 6

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/

于 2013-10-16T09:31:45.020 回答
0

img是内联元素，所以你应该分配text-align:center;给父块元素。假设您有这样的标记：

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

您的 CSS 可能如下所示：

#imgdiv {
    text-align: center;
}
于 2013-10-16T09:31:34.283 回答
0

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

于 2013-10-16T09:34:19.327 回答
0

我想你正在尝试这个，

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

于 2013-10-16T09:35:20.313 回答
0

尝试这个

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

演示文件

于 2013-10-16T09:39:01.023 回答
0

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

演示

于 2013-10-16T09:41:15.743 回答