使用vertical-align实现垂直对齐
Posted Jo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vertical-align实现垂直对齐相关的知识，希望对你有一定的参考价值。
关于垂直对齐，之前研究过好几次了，但感觉每次都没研究透彻，做了几个效果，就觉得自己掌握了，实在是自欺欺人。真乃搞技术的大忌。
这两天又下定决心重新开始研究vertical-allign这个高深莫测的属性了，决定一举攻破城池。但由于这个属性牵扯到的东西实在太多，line-height、盒模型等，都是css中的难点。所以要彻底掌握要花好些时间了。
使用table-cell实现垂直对齐：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ display: table-cell; height: 10em; border: 1px solid #ccc; vertical-align: middle; } span{ display: inline-block; vertical-align: middle; } </style> </head> <body> <div> <span>这是一个关于多行文字的垂直居中<br>这是第二行</span> </div> </body> </html>
使用after伪元素实现对齐：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html,body,.box{ margin: 0; height: 100%; } .box{ width: 100vw; height: 100vh; text-align: center; background-color: rgba(0,0,0,.3); } .box:after{ content: ‘‘; display: inline-block; width: 0; height: 100%; vertical-align: middle } img{ vertical-align: middle } </style> </head> <body> <div class="box"> <img src="img/1.jpg"> </div> </body> </html>
以上是关于使用vertical-align实现垂直对齐的主要内容，如果未能解决你的问题，请参考以下文章