在行的中心(在同一行上)显示两个图像，但中间有一个特定的空间

Question

抱歉，如果我以不专业的方式提出问题。我有一个div，里面有两个图像（上一个和下一个图像箭头）;我想将它们排成一排，使这两个图像位于中心，中间有一些特定的空间;

我尝试如下：

<div class='navbars'>
      <img src='<?PHP echo base_url('image/previous.png'); ?>' id='previous' style='width: 70px;height:70px;' alt='previous'>
      <img src='<?PHP echo base_url('image/next.png'); ?>' id='next' style='width: 70px;height:70px;' alt='next'>
</div>

和我的 CSS：

#previous , #next{
    cursor: pointer;
}
#previous{
    margin-left: 330px;
}
#next{
    margin-left: 550px;
}

但首先，330pc和550不是将它们放在中心的好方法！有没有更好的方法？其次，图像显示在两个不同的行中！不是同一行！

如果您需要更多澄清，请让我知道您需要更多 lcarization 的部分，我会提供更多澄清。

Answer 1

我会使用两种技术之一。

• 将图像放在一个<span>内，并在跨度内使用margin: auto;。
• 在<div>上使用text-align: center;，使内部元素居中。

对于分离，我通常倾向于在其中一个要素上增加一个边距。

您可以看到第二个选项在以下位置工作： http://jsfiddle.net/57HCG/：

#previous , #next{
    cursor: pointer;
}
#next{
    margin-left: 25px;
}
.navbars {
    text-align: center;
}

Answer 2

要使它们彼此相邻，您需要将它们浮动：

float:left;

然后你添加：

margin-right:XXpx;

在左边。

应该做这个伎俩。

Answer 3

将

图像添加为父级inline-block和text-align:center。然后将margin-right添加到第一个。

JSFiddle

.HTML

<div class="wrapper">
    <img src="http://lorempixel.com/output/abstract-q-c-70-70-6.jpg" alt=""/>
    <img src="http://lorempixel.com/output/abstract-q-c-70-70-6.jpg" alt=""/>
</div>

.CSS

.wrapper {
    font-size:0;
    text-align:center;
    width:50%;
    margin:0 auto;
    border:1px solid grey;
    padding:10px;
}
.wrapper img {
    display:inline-block;
    vertical-align:top;
}
.wrapper img:first-child {
    margin-right:25px;
}

Answer 4

许多人认为用于布局目的的浮动元素是不好的。看到这个SO问题：漂浮物不好吗？应该用什么来代替它

因此，让我提出一个不同的解决方案（div2和div3是图像的替身）：

.HTML

<div id="div1">
    <div id="div2">1</div>
    <div id="div3">2</div>
</div>

.CSS

#div1 {
    position:relative;
    background-color:#CCC;
    height:100px;
}
#div2, #div3 {
    position:absolute;
    height:100px;
    width:100px;
}
#div2 {
    background-color:#09f;
    top:0;
    right:50%;
    margin-right:10px;
}
#div3 {
    background-color:#f90;
    top:0;
    left:50%;
    margin-left:10px;
}

演示

• http://jsfiddle.net/qK6JA/