Question

下面是我的div结构。我在顶部和底部都设置了2个arraow。

我的问题是如何使2个箭头居中并略微朝向图像列？

我试过这个但没有运气

.arrows{
    border: 3px solid lime;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: inline-block;
    height: auto;
}

HTML：

<div id="Wrapper">
  <div class="row">
      <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
    <div id="itemWrapper">
      <div id="items">
          <div class="content">
              <input type="image" src="http://img42.com/p1puE+" class = "thumb" />
          </div>
          <div class="content">
              <input type="image" src="http://img42.com/p1puE+" class = "thumb" />
          </div>
          <div class="content">
              <input type="image" src="http://img42.com/p1puE+" class = "thumb" />
          </div>
      </div>
    </div>
        <img src="http://img42.com/h1DoP+" class="arrows" height="128" width="128" />
  </div>            
</div>

enter image description here

Answer 1

居中箭头

将箭头括在div标记中。将div s的宽度设置为与图像相同的宽度。然后，在你的css中使用text-align: center作为div。

<div class="arrow-wrapper">
    <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>

的CSS：

.arrow-wrapper{
    width: 200;
    text-align: center;
}

让他们更接近

为了让它们更贴近图像，请为每个箭头指定一个类：

<img src="http://img42.com/p2OH4+" class="arrows top" height="128" width="128" />
<img src="http://img42.com/p2OH4+" class="arrows bottom" height="128" width="128" />

然后把css：

.top{
    position: relative;
    top: 20px;
}
.bottom{
    position: relative;
    bottom: 20px;
}

Answer 2

嗯，您使用display-inline和text-align:center

走在正确的轨道上

您只需要在父元素上设置align属性，以便该父元素内的任何内联或显示内联HTML元素都居中。

#Wrapper{
    height: 100%;
    border: 1px solid #f60;
    text-align:center;
    width:300px;
}

.arrows{
    border: 3px solid lime;
    display:inline-block;
    background:red;
    position:relative;
    z-index:10;
}

您还可以在#itemWrapper上使用负边距来上下偏移箭头。

#itemWrapper{
    height: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid brown;
    margin-top:-15px;
    margin-bottom:-15px;
}

JSFIDDLE

Answer 3

要添加@Slavenco的答案并完全包装，我建议添加一个“箭头 - 顶”类和“箭头 - 底”类，并调整边距以实现您正在寻找的重叠效果。您可能需要调整z-index以使箭头显示在顶部。

我像这样包裹每张图片：

<div class="arrow arrow-top">
  <img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>

（当然，底部箭头是箭头 - 底部而不是箭头顶部） CSS如下：

.arrow { width: 100%; text-align:center; }
.arrow-top{ margin-bottom: -10px; }
.arrow-bottom{ margin-top: -10px; }

你可以明显地调整边距，直到你得到你想要的绝对期望重叠。

https://jsfiddle.net/b899145q/12/

Answer 4

我使用职位：亲属; for class =＆＃34; row＆＃34;和位置：绝对;对于班级=＆＃34;箭头＆＃34;获得你想要的重叠。将它们从文档流中取出。要让它们只是在没有重叠的情况下居中，请移动text-align：center;到包含元素。

将箭头水平对齐到图像列

4 个答案: