一个菜鸟的互联网技术分享博客
您的位置: 主页 > 纯CSS实现多行文字垂直居中几种方法解析
advertisement

纯CSS实现多行文字垂直居中几种方法解析

场景:父元素 高度固定,如何使其中的文字垂直居中?

1、table布局:
  利用display:table+display:table-cell的方法
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6. </head>  
  7. <style>  
  8.     .middle-box{  
  9.         display: table; /*重点*/  
  10.         height: 300px;border: 1px solid #000;  
  11.     }  
  12.     /*重点:table-cell布局*/  
  13.     .middle-inner{  
  14.         display: table-cell;  
  15.         vertical-align:middle;  
  16.         text-align:center;  
  17.     }  
  18. </style>  
  19. <body>  
  20. <div class="middle-box">  
  21.     <div class="middle-inner">  
  22.         <p><span class="suc-tip">https://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.html</span></p>  
  23.         <p style=""><span class="suc-tip">https://www.zhangren.online</span></p>  
  24.     </div>  
  25. </div>  
  26. </body>  
  27. </html>  

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6. </head>  
  7. <style>  
  8.     .middle-box{  
  9.         display: table; /*重点*/  
  10.         height: 300px;border: 1px solid #000;  
  11.     }  
  12.     /*重点:table-cell布局*/  
  13.     .middle-inner{  
  14.         display: table-cell;  
  15.         vertical-align:middle;  
  16.         text-align:center;  
  17.         height: 200px;  
  18.         border:1px solid #000;  
  19.     }  
  20. </style>  
  21. <body>  
  22. <div class="">  
  23.     <div class="middle-inner">  
  24.         <p><span class="suc-tip">https://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.htmlhttps://www.zhangren.online/index.html</span></p>  
  25.         <p style=""><span class="suc-tip">https://www.zhangren.online/index.html</span></p>  
  26.     </div>  
  27. </div>  
  28. </body>  
  29. </html>  

利用display:table-cell

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>css居中对齐</title>  
  6.     <style>    
  7.         *{padding: 0;margin:0;font-size: 12px;}    
  8.         div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;}    
  9.     </style>  
  10.     <div>    
  11.         <span>测试文字测试文字</span>    
  12.     </div>    
  13.     <div>    
  14.         测试文字测试文字    
  15.     </div>    
  16.     <div>    
  17.         <p>测试文字测试文字</p>  
  18.         <p>测试文字测试文字</p>  
  19.     </div>    
  20. </body>  
  21. </html>  
优点:等高布局,无需设置高度,文字轻松实现垂直居中
缺点:ie7以下不兼容!

2、利用line-height和vertical-align:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>css居中对齐</title>  
  6.     <style>    
  7.         *{padding: 0;margin:0;font-size: 12px;}    
  8.         div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid #000; line-height: 200px;}    
  9.         span{display: inline-block;vertical-align: middle;line-height: 22px;}  
  10.     </style>  
  11.     <div>    
  12.         <span>测试文字测试文字</span>    
  13.     </div>    
  14.     <div>    
  15.         <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>    
  16.     </div>  
  17. </body>  
  18. </html>  
关键样式:
  ① 父元素(这里是div)设置和高度一致的 line-height (这里是200px)--- 由后面的vertical-align定义看,这是为了设置div的基线
  ② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle;  --- inline水平的元素无法设置line-height,所以这里要设置inline-block。
  重新审视一下 CSS vertical-align 属性 的定义:
  该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,允许指定负长度值和百分比值,这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
  有以下几点需要注意:
  ① vertical-align属性应该设置到 行内元素上(行内块元素也可)
  ② 如果文字的总高度超出了 容器(这里是div)的高度,那么垂直居中会失效。
  ③ ie7以下 span结束标签和内部内容不能有间隔空白,也就是说span的结束标签和内部内容要连在一起。
zhangren.online
上一篇:解决jQuery ajax动态新增节点无法触发点击事件的问题
下一篇:解决微信公众号中出现:Uncaught ReferenceError: wx is not defined

您可能喜欢

回到顶部