0

对不起，如果我以不专业的方式问我的问题。我有一个 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 并不是将它们放在中心位置的好方法！有没有更好的办法？其次，图像显示在两个不同的行中！不是同一排！

如果您需要更多澄清，请告诉我您需要更多澄清的部分，我会提供更多澄清。

4

4 回答 4

1

我会使用两种技术之一。

  • 将您的图像放在 a 中<span>并margin: auto;用于跨度。
  • 使用text-align: center;在<div>so 里面的元素是居中的。

对于分隔，我通常倾向于为其中一个元素添加边距。

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

#previous , #next{
    cursor: pointer;
}

#next{
    margin-left: 25px;
}

.navbars {
    text-align: center;
}
于 2013-10-31T20:00:11.640 回答
0

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

float:left;

然后你添加：

margin-right:XXpx;

到左边。

应该做的伎俩。

于 2013-10-31T19:52:27.683 回答
0

将图像添加为父级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;
}
于 2013-10-31T20:02:57.787 回答
0

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

所以让我提出一个不同的解决方案（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;
}

演示

于 2013-10-31T20:05:08.083 回答