html - 图片 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> 

这看起来像下图。但是当我缩小屏幕时效果不佳，因为 cols 彼此堆叠在一起。如何将箭头和图像放在一个列中并使它们具有响应性？

Answer 1

对于图像大小...您可以使用像这样的视口(viewport)单位自动调整箭头图标的大小，并使用此维度的百分比...更多信息的 css 技巧链接 css-tricks.com/fun-viewport-units

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

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

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