行内块与文字垂直居中对齐(vertical-align)

css的vertical-align属性使用场景:经常用于设置图片(行内元素)或者表单(行内元素)和文字垂直对齐!

语法:

img { vertical-align: baseline | top | middle | bottom; }
行内块与文字垂直居中对齐(vertical-align)

图片与文字默认是基线对齐,想要中线对齐设置vertical-align: middle; 即可

vertical-align只针对于行内元素、行内元素和文字垂直对齐!如果是通过<i>标签加背景图的形式,需要先将i转换为行内块元素,然后再添加vertical-align: middle;

i {
   display: inline-block;
   vertical-align: middle;
}

display和vertical-align搭配使用,可以让某一个盒子和文字垂直居中!

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信