元素 ext ddl head src rgb back har
关于垂直对齐,之前研究过好几次了,但感觉每次都没研究透彻,做了几个效果,就觉得自己掌握了,实在是自欺欺人。真乃搞技术的大忌。
这两天又下定决心重新开始研究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实现垂直对齐
来源: http://www.bubuko.com/infodetail-2287351.html