当前位置: 首页 > Web前端 > CSS

img图文对齐,图标和标题对齐

时间:2023-03-30 16:12:02 CSS

img图文对齐,图标和标题对齐很多时候,页面中会出现图标和文字混合的情况,使用vertical-algin:middle无法让图片完全对齐到文本。目的是达到这样的效果:(这个是用vertical-align实现不了的)首先看一下vertical-align:vertical-align:middle是在img上设置的,虽然此时可以看出来,但还不够完美.做一个完美主义者肯定是受不了的。一个完美的解决方案html结构是这样的

BTC
scss(我不知道如何在这里移动scss:scss的基本用法)。coin-title{line-height:1;白颜色;底部边距:8px;>img{浮动:左;高度:1rem;显示:块;}>h5{字体大小:1rem;左填充:20px;}&:after{//clearfix内容:'';明确:两者;显示:块;}}实现原理如下,同时用
包裹在一个div中,这样
都显示为一个块,给设置高度一致with
,此时会自动缩放到这个高度,使float:left,此时,会离开布局,为
设置padding-left,较大的宽度,将出现在
的左侧。给元素div加一个clearfix来抵消上面float带来的副作用。