为什么CSS层叠样式表，也要设置垂直居中对齐

.one{font-size:2em;

text-transform:uppercase;

vertical-align:middle;

}

源自：CSS文本样式 4-3 编程练习

收起

1回答

小于飞飞 2018-06-01 18:14:00

请将完整代码上传（不要上传代码截图），以便更好检测和解决问题，祝学习愉快。

提问者慕村7528610 #1

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本样式</title> <style type="text/css"> p{font-size:2em; background-color:#eee; text-align:center; line-height:5em; height:5em; } img{ vertical-align:middle; } .one{font-size:2em; text-transform:uppercase; /*vertical-align:middle;*/ } .two{text-transform:capitalize; color:red; text-decoration:underline; /*vertical-align:middle;*/ } </style> </head> <body> <p><img src=" http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg/"><span class="one">css层叠样式表</span><span class="two">(cascading style sheets)</span></p> </body> </html>

2018-06-06 08:45:13
小于飞飞回复提问者慕村7528610 #2

这与对齐的基准有关系，因为图片设置了 vertical-align: middle ，可以通俗理解为，图片的中线以该行的基线对准，可不是整体的居中，所以文字设置 vertical-align:middle; 使其居中对齐。祝学习愉快。

2018-06-06 10:42:45