练习——文本垂直（居中）对齐

1、第一个文本通过vertical-align设置为垂直对齐底部，但是在Chrome中需要加上“display:table-cell”才能实现；

2、第二个文本（单行）通过设置文本高度与行高相等，间接实现文本垂直居中显示；对于多行文本，该方法无效。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vertical-align</title>
 6     <style type="text/css">
 7         div{
 8             width:12em;                            /*div固定宽度*/
 9             height:6em;                           /*div固定高度*/
10             border:solid 1px red;                /*div边界：实线 1px宽 红色*/
11         }
12         .div1{
13             vertical-align:bottom;               /*div向底部垂直对齐*/
14             display:table-cell;                   /*非常重要*/
15         }
16         .div2{
17             line-height:6em;                       /*与div高度相同*/
18         }
19     </style>
20 </head>
21 <body>
22 <div class="div1">文本垂直对齐</div>
23 <div class="div2">文本垂直居中对齐</div>
24 </body>
25 </html>

ps：用多行文本（2行）试了一下第二种方法，结果第一行还是垂直居中对齐，第二行被挤到border外面去了。

posted @ 2017-11-24 16:38  金牛acho  阅读(206)  评论(0)  编辑  收藏  举报