CSS中,图标和文字都是常用的元素,经常用到的样式之一就是图标和文字的水平对齐。首先,需要确保图标和文字都处于同一行内。可以使用display:inline-block实现。例如:.icon { di
CSS中,图标和文字都是常用的元素,经常用到的样式之一就是图标和文字的水平对齐。
首先,需要确保图标和文字都处于同一行内。可以使用display:inline-block实现。例如:
.icon { display: inline-block; vertical-align: middle; /* 可选:让图标垂直居中 */ } .text { display: inline-block; vertical-align: middle; /* 可选:让文字垂直居中 */ }
其中,vertical-align属性可以让元素垂直对齐,这里用到中间对齐的效果。
接下来,需要让图标和文字水平对齐。这可以使用line-height属性来实现。具体做法是给元素设置相同的line-height,这里可以使用单位为像素的具体数值,也可以使用百分数。
.icon, .text { line-height: 24px; /* 设置相同的行高 */ }
这样,就可以实现图标和文字的水平对齐了。
同时,如果要让多个图标和文字都水平对齐,可以使用伪元素:after,给其设置display: inline-block,并设置相同的line-height和vertical-align属性。
.icon, .text { position: relative; /* 让父元素position:relative */ line-height: 24px; /* 设置相同的行高 */ } .icon:after, .text:after { content: '; display: inline-block; width: 0; height: 100%; vertical-align: middle; /* 让伪元素垂直居中 */ }
以上就是关于CSS中图标和文字水平对齐的方法,希望对大家有所帮助。
粉丝
0
关注
0
收藏
0