// 1 小图标和文字的对齐
// 通过vertical-align 负值
<style media="screen"> .img-class{ width:20px; height: 20px; vertical-align:-10px; } </style> <div> <img class="img-class" src="http://www.17sucai.com/preview/1268063/2018-08-02/Friends/images/icon-vip1.png" alt=""> web前端，就职于腾讯ISUX上海设计中心，喜欢卖萌打杂，同事都叫我张老师，(*^__^*) 嘻嘻…… </div>
//2.不定尺寸图片或多行文字的垂直居中
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>不定尺寸图片或多行文字的垂直居中</title> <!-- 1. 主体元素inline-block化 2. 0宽度100%高度辅助元素； 3. vertical-align:middle --> <style media="screen"> .container{ height: 200px; border:1px solid #000; background: #eee; text-align: center; } .img-class{ width:100px; height: 100px; } img{vertical-align: middle;} span{ vertical-align: middle;} i{display: inline-block; height: 100%; vertical-align: middle;} </style> </head> <body> <div class="container"> <img class="img-class" src="http://www.17sucai.com/preview/1268063/2018-08-02/Friends/images/icon-vip1.png" alt=""> <span>web前端，就职于腾讯ISUX上</span> <i></i> </div> </body> </html>
原文：https://www.cnblogs.com/ron123/p/9545388.html