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

最新推荐文章于 2024-07-31 16:33:26 发布

原创最新推荐文章于 2024-07-31 16:33:26 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了关于清除搜索历史按钮样式的调整细节，提出了对于使用span元素作为文本容器的批判性观点，并提供了具体的CSS样式代码实现。

这是百度的方案

这里写图片描述

这是我的

这里写图片描述

吐槽

**其实 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;
}