Question

我有一个模态相册，其中显示了不同尺寸的图像。我的想法是，不管图像的大小如何，如何设置导航箭头的样式，使它们显示在页面的中间。这是我的代码：

<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

使用位置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>

Answer 2

您需要在箭头容器上应用transform: translateY(-50%)，以便将箭头置于中心。

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

或者简单地删除position: absolute; top: 50%;

Answer 3

这对您有用吗？我添加了引导类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>

如何垂直固定导航箭头？

3 个答案: