垂直居中
inline-block状态下样式会跑偏
栗子1：
<style> img{ /* vertical-align，它只在 display为 inline 或者 inline-block 的情况下起作用，默认值是 baseline,middle、bottom、text-bottom、text-top */ vertical-align: middle; } style> <body> <div> <img style="height: 200px;" src="https://i.loli.net/2021/06/15/u9GnFQEhYBtwmLf.jpg"> <span>文字垂直居中span> div> body>
栗子2：
<div> <i>i> <span>文字垂直居中span> div>
div{ height: 40px; border: 1px solid #000; } div i{ display: inline-block; width: 5px; height: 20px; margin-top: 10px; margin-bottom: 10px; /* margin-top margin-bottom必须都有 否则会改变基线*/ background: #FF5722; vertical-align: middle; margin-right: 5px; } div span{ vertical-align: middle; }