Question

我正在尝试将这些上一个和下一个链接对齐，使其与中心的图像垂直对齐并向侧面拉（它需要响应，图像的高度和宽度始终不同）。在前面的链接上使用flex和绝对定位似乎没问题，虽然居中是一个问题，但它与左边对齐，但是在这种情况下，下一个链接位于行的右下角。

.previous {
    color: #fff;
    width: 50%;
    position: absolute;
    display: flex;
    margin-left: 30px;
  }

<div class="row-attachment-image text-center">
    <a class="previous" href="#">&lt;</a>
    <img src="https://placeimg.com/640/480/any">
    <a class="next" href="#">&gt;</a>
</div>

我已经设置了一个bootply http://www.bootply.com/nh0yRF4min

Answer 1

如果你想使用flexbox，我会建议：

.row-attachment-image {
  background-color: #000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  }

Demo

垂直和侧面对齐图标

1 个答案: