最直接的办法其实是使用vertical-align这个属性,但由于我是半路出家学的css,很多基础知识掌握并不扎实,所以很多时候用vertical-align这个属性就会失效。于是在任务进行的过程中,我总结了一套万能的图片、文字垂直居中方法,记录在这里(脑子不好,为了便于以后使用时理解代码,在写demo时对所有代码进行了注释)
在线演示:DIV中的图片文字垂直居中Demo
代码说明:(图片就用的codepen上随手找的图片,不知道会不会哪天突然失效)
HTML代码:
<div>
<img src="https://cdn4.buysellads.net/uu/1/62837/1587604228-cp-80x80.png" >
<span>投票</span>
</div>
CSS代码:
div{
width:110px; /*div的宽度,根据需要进行设定即可*/
height:48px; /*div的高度,根据需要进行设定即可,最好明确设置,后面要用,不明确设置也可以,就是后面调试居中比较麻烦*/
background-color:rgba(163,223,255,0.8); /*div的背景颜色,根据需要进行设定即可,这里是为了更好地显示居中效果才设置的背景颜色*/
}
img{
width:28px; /*div中图片的宽度,根据需要进行设定即可*/
height:28px; /*div中图片的高度,根据需要进行设定即可*/
padding-top:10px; /*设置图片上边距,重点:上边距=(div的高度-图片的高度)/2 这是保证垂直居中的关键之一*/
padding-left:20px; /*设置图片左边距,根据需要进行设定即可*/
display:inline-block; /*设置图片为块级元素(方便后面浮动),必须要有,否则会出现图片、文字无法在同一条直线上居中*/
float:left; /*设置图片左浮动,必须要有,否则会出现图片、文字无法在同一条直线上居中*/
}
span{
font-size:16px; /*设置文字字体大小,根据需要进行设定即可*/
display:inline-block; /*设置文字所在的span标签为块级元素(方便后面浮动),必须要有,否则会出现图片、文字无法在同一条直线上居中*/
float:left; /*设置文字所在的span标签左浮动,必须要有,否则会出现图片、文字无法在同一条直线上居中*/
line-height:48px; /*设置文字行距,如果是单行文字,要实现居中的话,这里必须将行距设置为和外层div同样的高度*/
padding-left:5px; /*设置文字左边距,用于控制文字和图片的距离,根据需要进行设定即可*/
}