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外面去了。