给中间固定位置的盒子左右两边添加对称图标方法

74 阅读1分钟

给中间固定位置的盒子左右两边添加对称图标方法
在这里插入图片描述

【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;
}