Question

使用Vue.js中的bootstrap 4，我想使左右箭头出现在图像周围页面的中间。这是代码：

<div class="row">
    <div class="col-1">
        <span class="align-self-center"><h1>&#10094;</h1></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 class="align-self-center"><h1>&#10095;</h1></span>
    </div>
</div>

但是无论我如何篡改CSS，我都无法实现。我怎样才能解决这个问题？

Answer 1

好吧，多亏了this的回答，我意识到可以通过添加一个简单的flex css来做到大惊小怪：

.img-box {
   display: flex;
   align-items:center;
}

别忘了添加img-box类：

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

如何在bootstrap col中垂直对齐中心图标？

1 个答案: