How to vertically fix navigation arrows? - html

Question

I have a modal album which shows images with different sizes. My pbolem is that how to style the navigation arrows, so that they appear at the middle of the page, no matter what is the size of the image. Here is my code:
<div class="row img-box">
<div class="col-1">
<span #click="nextImg(-1)" class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span #click="nextImg(1)" class="nav-arrow">❯</span>
</div>
</div>
And here is the relevant css:
.modal-img {
max-height: 1080px;
}
.img-box {
display: flex;
align-items:center;
}
.nav-arrow {
font-size: 3em;
position: absolute;
top: 50%;
}
But whatever I tweak the CSS can not get the desired effect. Hence the question.

Answer 1

Use position fixed
.modal-img {
max-height: 1080px;
}
.img-box {
display: flex;
align-items:center;
justify-content: center;
}
.nav-arrow {
font-size: 3em;
position: fixed;
top: 120px;
}
.nav-left {
left: 10px;
}
.nav-right {
right: 10px;
}
<div class="row img-box">
<div class="col-1">
<span #click="nextImg(-1)" class="nav-arrow nav-left">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" src="https://via.placeholder.com/500C/O https://placeholder.com/">
</div>
<div class="col-1">
<span #click="nextImg(1)" class="nav-arrow nav-right">❯</span>
</div>
</div>

Answer 2

you need to apply transform: translateY(-50%) on arrow container's, in order to put the arrows in the center.
.nav-arrow {
font-size: 3em;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
or simply, remove position: absolute; top: 50%;

Answer 3

Does this works for you? I have added the bootstrap class align-items-center and some padding to spans
.modal-img {
max-height: 1080px;
}
.nav-arrow {
font-size: 3em;
position: relative;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row img-box align-items-center">
<div class="col-1 ">
<span #click="nextImg(-1)" class="nav-arrow pt-5 d-inline-block">❮</span>
</div>
<div class="col-9 text-center">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" src="https://via.placeholder.com/100/O https://placeholder.com/">
</div>
<div class="col-1">
<span #click="nextImg(1)" class="nav-arrow pt-5 d-inline-block">❯</span>
</div>
</div>