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

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>