首页 > 代码库 > vertical-align:middle的居中细节调整
vertical-align:middle的居中细节调整
使用vertical-align:middle可以让行级元素垂直居中，但这个居中是以文字的中线来计算的，而文字的中线在不同的字体上不同，甚至相同的字体在不同的浏览器上显示的都不同。
所以直接使用vertical-align:middle很难完美居中，因此需要其它调整。
<!DOCTYPE html><style>div { border:1px solid red; width:200px; height:100px; line-height:100px; text-align:center;}span {vertical-align:middle;}#box { display:inline-block; width:100px; height:98px; background:#EEE;}</style><div> abc<span id="box"></span>def</div>
当容器内存在vertical-align:middle元素时，它们的中线会被对其到所在行的基线上。
而所在行的基线未必是中线，基线与中线偏离的距离就是vertical-align:middle垂直居中时候出现的偏离距离。
基线与中线的位置差异会受到字体、字形、字号，等影响。而且在不同浏览器上字体的渲染还存在差异，这样就不容易计算具体的偏差。
但我们可以取消掉基线和中线的位置差，做法是将字号改到0，也就是不在行中直接使用文本节点。
<!DOCTYPE html><style>div { border:1px solid red; width:200px; height:100px; line-height:100px; text-align:center; font-size:0px;}span { vertical-align:middle; display:inline-block; font-size:1rem;}#box { width:100px; height:98px; background:#EEE;}</style><div> <span>abc</span><span id="box"></span><span>def</span></div>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。