【css】实现图⽚与⽂本对齐要实现图⽚和⽂本对齐，可以使⽤下列⼏种⽅法。
第⼀种，使⽤vertical-align:middle
.icon{
background-repeat:no-repeat;
background-position:center;
display:inline-block;
width:16px;
height:16px;
vertical-align:middle;
}
.icon-down{
background-image:url(./imgs/icon-chevron-down.png);
}
.icon-up{
background-image:url(./imgs/icon-chevron-up.png);
}
<body>
<div>请选择<span class="icon icon-down"></span></div>
<script>
var span = document.querySelector('span');
if(ains('icon-down')){
ve('icon-down');
span.classList.add('icon-up');
}else if(ains('icon-up')){
ve('icon-up');
span.classList.add('icon-down');
}
icon图标库}
</script>
</body>
第⼆种，vertical-align:baseline + 容器与图⽚⾼度⼀致
/* div{
line-height:32px;
}      */
.icon{
background-repeat:no-repeat;
background-position:center;
display:inline-block;
width:32px;
height:32px;
/* white-space:nowrap;
text-indent:-999em; */
}
.icon-position{
background-image:url(./imgs/icon-position.png);
}
.icon-position{
background-image:url(./imgs/icon-position.png);
}
<body>
<div><span class="icon icon-position">当前位置</span>杭州</div> </body>
所以要实现图⽚⽂本对齐的css样式如下：
div{
line-height:32px;
}
.icon{
background-repeat:no-repeat;
background-position:center;
display:inline-block;
width:32px;
height:32px;
white-space:nowrap;
text-indent:-999em;
}
.icon-position{
background-image:url(./imgs/icon-position.png);
}
第三种，容器vertical-align:top + 图⽚position:absolute
<body>
<span class="icon-box"><i class="icon-delete"></i>删除</span> </body>
.icon-delete{
background:url(./imgs/delete.png) no-repeat center;
display:inline-block;
width:16px;height:16px;
}
所以，要实现图标⽂本对齐，css样式如下：
.icon-box{
padding-left:16px;
line-height:16px;
vertical-align:top;
}
.icon-delete{
background:url(./imgs/delete.png) no-repeat center;
width:16px;height:16px;
position:absolute;
margin-left:-16px;
}
position:absolute会将元素块状化，相当于display:block，所以之前的display:inline-block是多余的，可以删除。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。