垂直和横向对齐图标

Question

我正在尝试将这些上一个和下一个 link 对齐，以便与居中的图像垂直对齐并向侧面拉动（它需要响应，图像的高度和宽度总是不同的）。在前一个 link 上使用带有绝对定位的 flex 似乎没问题，它向左对齐，尽管居中是一个问题，但在这种情况下，下一个 link 会在行外，在右下角..

.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

垂直和横向对齐图标

Align icons vertically and sideways

html

css

css-position

flexbox