首页 > 代码库 > css中vertical-align垂直居中的认识

css中vertical-align垂直居中的认识

学习目录

技术分享

vertical-align为何不起作用??

vertical-align只钟情于“inline-block内联块级元素”

栗子:

技术分享
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vertical-align</title>
 6         <style>
 7              * {
 8                  margin: 0;
 9                  padding: 0;
10              }
11             .box {
12                 background-color: deeppink;
13                 color: #fff;
14                 padding-left: 10px;
15                 line-height: 65px;
16             }
17             .inner-box {
18                 display: inline-block;
19                 width: 4px;
20                 height: 4px;
21                 background-color: black;
22                 vertical-align: text-bottom; /*与父容器标签底部对齐*/
23             }
24         </style>
25     </head>
26     <body>
27         <div class="box">
28             <span class="inner-box"></span>
29             这是一段文本内容_vertical-align......
30         </div>
31     </body>
32 </html>
View Code

 技术分享

 

css中vertical-align垂直居中的认识