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

最新推荐文章于 2024-07-16 04:30:35 发布

dingling5406

最新推荐文章于 2024-07-16 04:30:35 发布

阅读量284

点赞数

原文链接：http://www.cnblogs.com/ailinzhijia/p/7891302.html

版权

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

转载于:https://www.cnblogs.com/ailinzhijia/p/7891302.html

dingling5406

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习——文本垂直（居中）对齐

1、第一个文本通过vertical-align设置为垂直对齐底部，但是在Chrome中需要加上“display:table-cell”才能实现；2、第二个文本（单行）通过设置文本高度与行高相等，间接实现文本垂直居中显示；对于多行文本，该方法无效。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head&g...
复制链接

扫一扫