Question

我正在尝试使用CSS水平对齐两个图像。在CSS中，我有：

#poster1 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 40px;
padding-top:595px;
}
#poster2 {
background-image: url(audioMaster2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-top:595px;
}

在HTML中，我现在有：

<div id="poster1"></div>
<div id="poster2"></div>

但是，很明显，图像是彼此之下，我不想要。我希望这些图像并排。

Answer 1

赋予div元素明确的宽度;否则它们将扩展以填充所有可用的水平宽度。

然后，您需要float他们或使用inline-block。

jsFiddle

Answer 2

你需要添加一些东西，试试这个：

#poster1 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 40px;
padding-top:595px;
float:left;
}
#poster2 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-top:595px;
float:left;
}
#wrapper{}

注意花车。您还可以添加宽度以指定所需的宽度。

添加包装也很常见。

<div id="wrapper">
    <div id="poster1">aa</div>
    <div id="poster2">bb</div
</div>

Answer 3

好的，试试这个：

CSS: #image1, #image2 {float:left; display:inline-block; background:#000; width:250px; height:250px; margin:5px;}

<div id="wrapper">
<div id="image1"><img src="1" /></div>
<div id="image2"><img src="2" /></div>
</div>

你应该发现你有两个并排的黑盒子，只需用背景替换背景：＃000，例如它就是：background：url（“audioMaster1.png”）no-repeat 0px 40px; < / p>

然后，您可以使用“包装器”将两个图像一起移动。：）

那应该做的。

在CSS中对齐两个图像

3 个答案: