给中间固定位置的盒子左右两边添加对称图标方法
【html代码】:
<div class="news-content-style mb40px ">
//左侧图标盒子
<div class="news-arrow left">
<a href="">
<img src="assets/images/index/left-icon.png" alt="" >
</a>
</div>
//中间固定区域内容
<div class="centet-item news-content-box">
</div>
//右侧图标盒子
<div class="news-arrow right">
<a href="">
<img src="assets/images/index/right-icon.png" alt="" >
</a>
</div>
</div>
【css代码】:
.news-arrow {
display: flex;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.news-arrow.left {
left: -60px;
}
.news-arrow.right {
right: -60px;
}
.news-arrow img {
width: 20px;
vertical-align: top;
}