单行图片与文字垂直居中、图片和span水平垂直居中问题

最新推荐文章于 2024-03-30 11:42:57 发布

kingrome2009

最新推荐文章于 2024-03-30 11:42:57 发布

阅读量3.7k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/kingrome2017/article/details/79262605

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是百度的方案

这里写图片描述

这是我的

这里写图片描述

吐槽

**其实 span 是行内元素完全没有必要改为行内块 **

<div class="searchHis">
				<div class="topHis">
					<p class="fl titHis">搜索历史</p>
					<p class="fr delHis"><img src="../img/dels_help.png" alt="icon"> <span>清除</span></p>
				</div>
			</div>

/* 搜索历史 */
.searchHis,.topHis{
  overflow: hidden;
  font-size: .3rem;
  padding:0 .3rem;
  box-sizing: border-box;
  color: #333;
}
.delHis{
  font-size: .26rem;
}
.topHis{
  line-height: .3rem;
}
.delHis span{
  vertical-align: middle;
}
.delHis img{
  width: .24rem;
  height: .26rem;
}