CSS多行文本固定高度的居中

最新推荐文章于 2022-11-22 20:23:07 发布
最新推荐文章于 2022-11-22 20:23:07 发布
阅读量867 收藏
点赞数
分类专栏： html5学习

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display

属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和

display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 div#wrap {
  height:400px;
  display:table;
 }
 div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
 }
  </style>
 </head>
 <body>
 <div id="wrap">
  <div id="content"><pre>现在我们要使这段文字垂直居中显示！随便复制几行测试<pre name="code" class="html" style="font-size: 14px; line-height: 25.2000007629395px;">   现在我们要使这段文字垂直居中显示
   现在我们要使这段文字垂直居中显示
</pre></div></div> </body></html> 

 

 


                

        

        

    




    

      

        

            

              
                
                  三爷麋了鹿
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
固定高度div下多行文本内容的垂直居中

				
			

			

				

					m_yeah的专栏
				

				

					09-13
					
					3508
					
				

			

		

		

			
				
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
 
   多行文字实现垂直居中 
  
  
 body { font-size:12px;font-family:tahoma;}
 div#wrap {
  display:table;
  bord

			
		

	



                

              
                



	

		

			

				
					
CSS 文本高度的问题

				
			

			

				

					WangYan的博客
				

				

					11-03
					
					697
					
				

			

		

		

			
				
开发中，一个文本写了10px，但是它的实际高度居然是16px。后来发现，原来文本的行高有个默认值，所以文本的高度为：lineHeight*fontSize=realHeight。
因此，如果需要文本高度跟字号大小保持一致，name设置下line-height即可！


...

			
		

	



                


  
              

                


	

		

			

				
					
css控制文本的行高

				
			

			

				

					『程序员·小李』的博客
				

				

					12-31
					
					2056
					
				

			

		

		

			
				
line-height可以控制文本的行高

示例


<p>
这是一个标准行高的段落。
在大多数浏览器默认行高约20 px。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>

<p class="p1">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>

<p class="p2">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个

			
		

	





	

		

			

				
					
css中文字高度的问题

				
			

			

				

					weixin_33691817的博客
				

				

					11-07
					
					806
					
				

			

		

		

			
				
今天用Firefox的Web Develop插件对一个网页的元素高度进行测量时发现，一个包含一行12px的文本的div的高度居然为14px而不是12px。

后来才知道，原来文本的行高默认为1.2，所以文本的高度为12*1.2=14px

特地写上来，大家引以为鉴
				
转载于:https://blog.51cto.com/skyintheseacjt/223...

			
		

	



		

			
		



	

		

			

				
					
多行文本垂直方向上居中方法总结

				
			

			

				

					SilenceJude的博客
				

				

					12-13
					
					589
					
				

			

		

		

			
				
问题描述
最近写项目的时候遇到个问题，数据从后台发送过来，可能是1行文本或者2行文本，要求居中显示。如果按照height=line-height的方式来做，当文本是2行的时候就会使得2行文本的间距非常大。

解决办法：
1.首先给需要居中的元素外面再包一层div作为父元素。
2.然后设置父元素的height=line-height，按照最大可能2行的高度来设置。
3.对目标子元素设置display...

			
		

	





	

		

			

				
					
CSS设置多行文本垂直居中的方法

				
			

			

				

					09-25
				

			

		

		

			
				
单行文本居中比较简单，就是将line-height设置成和height一样就可以了，对于多行文本，这种方式就行不通了，使用width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性即可实现

			
		

	





	

		

			

				
					
css多行文本垂直居中

				
			

			

				

					09-27
				

			

		

		

			
				
css 多行文本垂直居中显示，兼容各大浏览器！

			
		

	





	

		

			

				
					
css实现文本和div居中对齐详细讲解示例

				
			

			

				

					09-25
				

			

		

		

			
				
 多行文本的垂直居中可以通过`display: flex;`和`align-items: center;`实现，或者使用`display: table-cell;`和`vertical-align: middle;`：  ```css  .parentDiv {  display: flex;  justify-content: center; /* ...

			
		

	





	

		

			

				
					
CSS文本和div垂直居中方法总结

				
			

			

				

					09-24
				

			

		

		

			
				
主要介绍了CSS文本和div垂直居中方法总结，包括多行文本垂直居中,单行文本垂直居中,子div垂直居中，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
多行文本垂直居中新方法

				
			

			

				

					ISaiSai的专栏
				

				

					12-23
					
					497
					
				

			

		

		

			
				
display: -webkit-box;
-webkit-box-align: center;

			
		

	





	

		

			

				
					
css：文字默认高度问题

				
			

			

				

					sunluyi的博客
				

				

					03-22
					
					1646
					
				

			

		

		

			
				
开发过程中，设置文字高度60px,实际页面显示的高度可能是80px，造成与ui设计图还原度不够，
解决方法：
line-height: 1;

下图显示：文字高度为60px+1px边框，高度应该是62px
实际页面高度为：82px

设置：line-height: 1;后


...

			
		

	





	

		

			

				
					
label 多行显示自适应高度

				
			

			

				

					weixin_30782331的博客
				

				

					08-08
					
					82
					
				

			

		

		

			
				
//项目中显示 地址：XXXXXXX换行　　 
　　 UILabel *numLable = [[UILabel alloc] initWithFrame:CGRectMake(80, 50, 40, 20)];
    numLable.text = @"地址：";
    numLable.font = [UIFont systemFontOfSize:13];
...

			
		

	





	

		

			

				
					
div 垂直居中 解决方案(一行,多行,固定高度)

				
			

			

				

					aabbcc456aa的专栏
				

				

					08-26
					
					856
					
				

			

		

		

			
				
这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生
 效，例如表格元素中的、、等，而像、这样的元素是没有valign特性的，因此使用vertical-al

			
		

	





	

		

			

				
					
用pre标签解决换行、自动高度 （实用）

				
			

			

				

					chelen_jak的专栏
				

				

					06-12
					
					4866
					
				

			

		

		

			
				
需求：
    红框的内容从数据库中取出，行数不确定，要求自动调整高度


html


    <div class="container">
        <div class="sm-item">
            <div class="item-label">特权说明</div>
            <pre cl...

			
		

	





	

		

			

				
					
css实现固定高度及未知高度文字垂直居中的完美解决方案

				
			

			

				

					w36680130的博客
				

				

					01-17
					
					589
					
				

			

		

		

			
				
css实现固定高度及未知高度文字垂直居中的完美解决方案

			
		

	





	

		

			

				
					
CSS字体、行高等其他样式

				
			

			

				

					XzXz0207的博客
				

				

					11-22
					
					1108
					
				

			

		

		

			
				
CSS字体、行高等其他样式

			
		

	





	

		

			

				
					
CSS文字与文本样式之文本行高line-height详解

				
			

			

				

					Science Explorer
				

				

					09-03
					
					6686
					
				

			

		

		

			
				
line-height： 
    对于代替元素，line-height没有影响 
    对于非代替元素，line-height才有影响 
       对于块级元素，css属性line-height指定了元素内部line-box的最小高度 
       对于行内元素，line-height用于计算line-box的高度   

默认值： normal 可继承

值： 
    normal ...

			
		

	





	

		

			

				
					
css 多行文本水平居中

					
最新发布

				
			

			

				

					10-12
				

			

		

		

			
				
可以使用以下 CSS 样式实现多行文本水平居中：  ```css .container {  display: flex;  justify-content: center;  align-items: center;  text-align: center; } ```  其中，`display: flex` 将容器设置为弹性布局...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值