div中让图片和文字在同一条水平线垂直居中（代码全部有注释） |
您所在的位置：网站首页 › 图片与文字对齐的html代码怎么写 › div中让图片和文字在同一条水平线垂直居中（代码全部有注释） |
div中让图片和文字在同一条水平线垂直居中（代码全部有注释）
|
最直接的办法其实是使用vertical-align这个属性，但由于我是半路出家学的css，很多基础知识掌握并不扎实，所以很多时候用vertical-align这个属性就会失效。于是在任务进行的过程中，我总结了一套万能的图片、文字垂直居中方法，记录在这里（脑子不好，为了便于以后使用时理解代码，在写demo时对所有代码进行了注释） 在线演示：DIV中的图片文字垂直居中Demo 代码说明：（图片就用的codepen上随手找的图片，不知道会不会哪天突然失效） HTML代码： 
投票
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; /*设置文字左边距，用于控制文字和图片的距离，根据需要进行设定即可*/ }
|
【本文地址】
今日新闻 |
推荐新闻 |