- A+
所属分类:Web前端
CSS中span元素垂直居中【解决span元素内基线对齐问题】
在样式的书写中,我们常常使用以下方式实现垂直居中,若span元素内例外,解决办法看文章最后
<div class="parent"> <span class="child">text</span> </div>
1.flex布局方式垂直居中
.parent{ display:flex; align-items:center }
2.line-height方式垂直居中
.parent{ height:64px; } .child{ height:64px; line-height:64px; }
3.绝对定位方式垂直居中
.parent{ position:relative; } .child{ positon:absolute; top:50%; transform:translateY(-50%) }
发现问题:
实际应用中发现,span内的元素,并不能垂直居中对齐,查了原因发现是因为默认按照底部基线对齐,问题如左图,正确的应该如右图:
**解决办法如下:**
1.如果希望父元素parent设置为固定高度,例如64px
.parent { line-height: 64px; height: 64px; background-color: antiquewhite; } .child { background-color: black; line-height: 1; vertical-align: text-top; }
2.如果希望父元素parent设置为100%,继承祖父元素的高度
.parent { height: 100%; line-height: 1; background-color: antiquewhite; } .child { background-color: black; vertical-align: text-top; }