图像Bootstrap旁边的简单箭头

Question

我有一个非常微不足道的问题。我只需要两个简单的箭头（左和右）垂直对齐到图像的中间。箭头必须响应并随屏幕尺寸变小。

我的代码现在只是：

<div class="row">
    <div class="offset-md-1 col-md-1">
        <i class="fa fa-arrow-left" style="position:relative; top:50%"></i>
   </div>
    <div class="col-md-8 detail_pic">
        <img src="#image" style="width:80%;">
        <h2 style="text-align:center;">#Title</h2>
    </div>
    <div class="col-md-1">
        <i class="fa fa-arrow-right" style="position:relative; top:50%"></i></div>
    </div>
</div> 

如下图所示。但是当我将屏幕尺寸放在屏幕上时，它不能很好地工作。如何将箭头和图像放在一个col中并使它们响应？

Answer 1

对于图像尺寸...您可以使用像img{ width: 2vmin}这样的视口单元自动调整箭头图标的大小，该视口单元会侦听视口中较短的宽度/高度尺寸，并使用此尺寸的百分比... css技巧链接了解更多信息css-tricks.com/fun-viewport-units

如果要将箭头定位在div的中心，请使用

img{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

有关flexbox垂直居中的有用文章phillipwalton.com