Как правильно исправить навигационные стрелки?

Question

У меня есть модальный альбом, который показывает изображения разных размеров.Мой pbolem заключается в том, как стилизовать навигационные стрелки, чтобы они появлялись в середине страницы, независимо от размера изображения.Вот мой код:

<div class="row img-box">
    <div class="col-1">
        <span @click="nextImg(-1)"  class="nav-arrow">&#10094;</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">&#10095;</span>
    </div>
</div> 

А вот соответствующий css:

.modal-img {
  max-height: 1080px;
}

.img-box {
   display: flex;
   align-items:center;
}
.nav-arrow {
  font-size: 3em;
  position: absolute;
  top: 50%;
}

Но что бы я ни настраивал, CSS не может получить желаемый эффект.Отсюда и вопрос.

Answer 1

вам нужно применить transform: translateY(-50%) к контейнерам со стрелками, чтобы поместить стрелки в центр.

.nav-arrow {
  font-size: 3em;
  position: absolute;
  top: 50%;
   transform: translateY(-50%)
}

или просто удалить position: absolute; top: 50%;

Answer 2

Это работает для вас?Я добавил класс начальной загрузки align-items-center и некоторые отступы к диапазонам

.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">&#10094;</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">&#10095;</span>
    </div>
</div> 

Answer 3

Использовать позицию 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">&#10094;</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">&#10095;</span>
    </div>
</div>