CODEWITHSUNDEEP
htmlcsscss-positionflexbox
Marko
Marko

Reputation: 1487

Align icons vertically and sideways

I am trying to align these previous and next links to be vertically aligned with image in center and pulled sideways (it would need to be responsive, height and width of an image are always different). Using flex with absolute positioning on previous links seems ok, it aligns to the left although centering is a problem, but the next link in that case goes outside of row, at the bottom right corner.. 

.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>

I have set a bootply http://www.bootply.com/nh0yRF4min

Upvotes: 0

Views: 47

Answers (1)

Paulie_D
Paulie_D

Reputation: 115240

If you want to use flexbox, then I'd suggest this:

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

Demo

Upvotes: 1

Related Questions