图片 文字 input等垂直居中对齐

时间:2022-05-07 12:28:54

span::before { width:100%; height:1px; font-size:1em; content:''; background:#fff; position:absolute; top:50%}
img { border:0; vertical-align:middle}
input, select { vertical-align:middle}
img + img, input + input, select + select { margin-top:-.14em}
-->

青色线text-top,紫色线baseline,黄色线middle,白线模拟视觉垂直中分线,一组两个,前一个为未加margin-top偏移。
img,input,select等和文本的垂直居中这些元素设置可以写成:
margin-top:-.14em; border:0; vertical-align:middle-----(根据实际字体情况,建议再微调.14值,也可用maring-bottom)

aAopPyZ|字图片 文字 input等垂直居中对齐图片 文字 input等垂直居中对齐
 
 
oFg
aAopPyZ|字图片 文字 input等垂直居中对齐图片 文字 input等垂直居中对齐
 
 
oFg
aAopPyZ|字图片 文字 input等垂直居中对齐图片 文字 input等垂直居中对齐
test

test

 
 
oFg
aAopPyZ|字图片 文字 input等垂直居中对齐图片 文字 input等垂直居中对齐
test

test

 
 
oFg
aAopPyZ|字图片 文字 input等垂直居中对齐图片 文字 input等垂直居中对齐
test

test

 
 
oFg
aAopPyZ|字图片 文字 input等垂直居中对齐图片 文字 input等垂直居中对齐
test

test

 
 
oFg

// span'), '::before').getPropertyValue(''));
// ]]>