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外面去了。
更多专业前端知识,请上 【猿2048】www.mk2048.com