vertical-align:sub居然居中对齐了

最新推荐文章于 2023-04-27 16:46:07 发布
最新推荐文章于 2023-04-27 16:46:07 发布
阅读量1.7k 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/424555
版权

vertical-align:sub;居然实现了居中对齐，不解！

 
 
  1. <!DOCTYPE HTML> 
  2.  <html>  
  3.  <head>  
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.  <title>Vertical-align意外的居中对齐？</title>  
  6.  <style type="text/css">  
  7. body  
  8. {  
  9.     font-size:0.75em;  
  10.     font-family0:Arial;  
  11. }  
  12.  input[type=checkbox],input[type=radio]   
  13. {  
  14.     vertical-align:sub;  
  15. }  
  16.  </style>  
  17.  </head>  
  18.  
  19.  <body>  
  20.  <input type="checkbox" />张三   
  21.  <input type="checkbox" />English   
  22.  <input type="radio" />张三   
  23.  <input type="radio" />English   
  24.  </body>  
  25.  </html>  
 
 
 
 
 
 
 
IE8,FF5里这样，其他的浏览器我没实验。
 
 

 
 

 
 

 
 

 
 

 
 

 
 
 本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/605594，如需转载请自行联系原作者
 


                

        

        




    




    

      

        

            

              
                
                  weixin_33752045
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
vertical-align 各个属性值的含义

				
			

			

				

					qq_44960253的博客
				

				

					06-24
					
					4388
					
				

			

		

		

			
				
vertical-align 各个属性值的含义
注意：vertical-align 属性不继承

有关基线、行内框、行框、内容区、行距的 定义


vertical-align: baseline
vertical-align: baseline 强制元素的基线与父元素的基线对齐。（多数浏览器的默认值）
vertical-align: super
vertical-align: super 使元素基线高于父元素基线，但是高多少规范中没有要求，由用户代理（浏览器）自己决定，不同浏览器可能不同。
<sty

			
		

	



                

              
                



	

		

			

				
					
vertical-align详细介绍

				
			

			

				

					shi15926lei的博客
				

				

					07-11
					
					5939
					
				

			

		

		

			
				
该属性可以接受多个值，包括关键字（如top、middle、bottom），长度单位（如像素、百分比）或百分比值的关键字（如baseline、sub、super）。是一个CSS属性，用于指定行内元素或表格单元格中内容的垂直对齐方式。它可以应用于行内元素、表格单元格或表格单元格中的内容。属性也可以接受长度单位（如像素）或百分比值。这些值用于指定元素相对于行框的偏移量。如果要垂直对齐块级元素，可以使用其他技术，如Flexbox或Grid布局。标签的行内元素将垂直居中对齐，而表格单元格中的内容将顶部对齐。

			
		

	



                


  
              

                


	

		

			

				
					
【CSS】vertical-align属性

				
			

			

				

					杜永康的博客
				

				

					11-30
					
					3756
					
				

			

		

		

			
				
总之一句话，就是极其不规律，我们如果用弹性盒去处理这些元素，得到的结果是全部垂直居中，或者全部换行。特异性的针对某一个，某几个元素设置样式，我们也可以通过定位，或者设置外边距，内边距实现。但是如果有大量元素呢？//使元素的基线对齐到父元素的基线之上的给定长度，可以是负数。//使元素的中部与父元素的基线加上父元素高的一半对齐。//使元素的基线对齐到父元素的基线之上的给定百分比。//使元素的基线与父元素的下标基线对齐。//使元素的基线与父元素的基线对齐。使元素的中部与父元素的基线加上父元素高的一半对齐。

			
		

	





	

		

			

				
					
Vertical-Align的原理及使用

				
			

			

				

					weixin_46625830的博客
				

				

					03-27
					
					2115
					
				

			

		

		

			
				
好，我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上，verticle-algin可以在不同上下文中灵活地对齐元素，以及进行细粒度的控制，不必知道元素的大小。元素仍然在文档流中，因而其他元素可以根据它们大小的变化进行相应的调整。一个有用的例子就是居中图标与旁边的文本。
Vertical-Align是个怪物
可是，vertical-align有时候也很难搞，经常导致困惑。好像有什么神秘的规则在起作用。比如，我们改变了某个元素的vertical-align而它的对齐方式

			
		

	



		

			
		



	

		

			

				
					
vertical-align属性的用法

				
			

			

				

					Aislli的博客
				

				

					05-25
					
					6408
					
				

			

		

		

			
				
vertical-align属性
baseline(默认值) :把行内级盒子的基线与父盒的基线对齐,如果没有基线, margin bottom边缘与父盒基线对齐；
sub :把行内级盒子的基线降到父盒下标的适当位置；
super :把行内级盒子的基线升到父盒上标的适当位置；
<percentage> :把行内级盒子提升或者下降段距离 (距离相对于line height计算)，0%意味着同baseline一样；
<length> :把行内级盒子提升或者下降一段距离 , 0cm意味着同b

			
		

	





	

		

			

				
					
css display 居中对齐 text-align vertical-align

				
			

			

				

					puspos的博客
				

				

					12-30
					
					1832
					
				

			

		

		

			
				
三个值
block块级元素：div p h form
以新行开始；
高度，行高、外边距和内边距都可控制；
宽度缺省是它的容器的100%
可容纳内联元素和其他块元素
inline内联元素：
和其他元素在一行: span input img
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
inline-block行内块元素
和其他元素在一行
可设置高、行高、外边距内边距

...

			
		

	





	

		

			

				
					
利用vertical-align:middle垂直居中

				
			

			

				

					weixin_43743956的博客
				

				

					01-05
					
					1452
					
				

			

		

		

			
				
1.方法一，利用空的span实现图片居中
&amp;lt;!doctype html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;
&amp;lt;style type=&quot;text/css&quot;&amp;gt;

 div{
   wi

			
		

	





	

		

			

				
					
使用vertical-align实现input和img对齐

				
			

			

				

					12-14
				

			

		

		

			
				
`vertical-align`属性主要用于设置行内元素或表格单元格内容的垂直对齐方式。它适用于`display`值为`inline`、`inline-block`、`table-cell`、`table-column`、`table-row`、`table-caption`、`inline-table`的元素...

			
		

	





	

		

			

				
					
css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

				
			

			

				

					12-10
				

			

		

		

			
				
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit ```  - `baseline`: 元素的基线与其父元素的基线对齐，这是默认值。 - `sub`: 将元素的...

			
		

	





	

		

			

				
					
css vertical-align属性的一些理解与认识(一)

				
			

			

				

					09-25
				

			

		

		

			
				
CSS中的`vertical-align`属性是用于控制元素在行内元素（inline elements）或者行内块元素（inline-block elements）中的垂直对齐方式。这个属性在布局设计中扮演着重要角色，尤其是在处理表格、图像、输入框等元素...

			
		

	





	

		

			

				
					
CSS属性探秘系列(四)：vertical-align

				
			

			

				

					09-25
				

			

		

		

			
				
例如，使用`vertical-align: middle`可以使图片和文本居中对齐，或者让`input[type='checkbox']`和`input[type='radio']`与文本对齐。  需要注意的是，`vertical-align`在不同浏览器中的表现可能存在差异，特别是...

			
		

	





	

		

			

				
					
css基础---vertical-align三

				
			

			

				

					chujinmaolu的博客
				

				

					06-25
					
					406
					
				

			

		

		

			
				
1、vertical-align文本类属性值
vertical-align:text-top：盒子的顶部和父级内容区域的顶部对齐。
vertical-align:text-bottom：盒子的底部和父级内容区域的底部对齐。



			
		

	





	

		

			

				
					
CSS属性vertical-align

				
			

			

				

					Ellasun_web的博客
				

				

					04-27
					
					253
					
				

			

		

		

			
				
用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、行内块元素和表格单元格元素生效。

			
		

	





	

		

			

				
					
图片对齐方式

				
			

			

				

					thewebcode
				

				

					06-16
					
					422
					
				

			

		

		

			
				
图片的横向对齐 图片本身没有text-align属性，需要通过css属性继承如
&lt;td style='text-align:left&gt;
 &lt;img src=""&gt;
&lt;/td&gt;
图片的纵向对齐：
vertical-align:


值
描述


baseline
默认。元素放置在父元素的基线上。


sub
垂直对齐文本的下标。


sup...

			
		

	





	

		

			

				
					
垂直对齐：vertical-align属性（转）

				
			

			

				

					zhengxiuchen86的博客
				

				

					09-24
					
					1583
					
				

			

		

		

			
				
行高与单行纯文字的垂直居中，而如果行内含有图片和文字，在浏览器内浏览时，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐，如图7-34所示。 

 

图7-34 文字和图片内容默认垂

			
		

	





	

		

			

				
					
7.4 垂直对齐：vertical-align属性

				
			

			

				

					猫沙盆
				

				

					07-28
					
					6133
					
				

			

		

		

			
				
上一小节讲解了行高与单行纯文字的垂直居中，而如果行内含有图片和文字，在浏览器内浏览时，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐，如图7-34所示。图7-34 文字和图片内容默认垂直对齐方式为基线对齐这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。7.4.1 语法vertical-align属

			
		

	





	

		

			

				
					
css中vertical-align（垂直对齐）的使用

				
			

			

				

					dodott的专栏
				

				

					06-29
					
					2517
					
				

			

		

		

			
				
这两天写个页面css的时候用到了vertical-align属性，使用过程中踩到了坑，所以总结如下：

　　1.vertical-align的语法

vertical-align属性的具体定义列表如下： 
　　语法：        vertical-align : baseline | sub | super | top | text- top | middle | bottom | t

			
		

	





	

		

			

				
					
vertical-align属性解决元素间有间隙和对不齐问题--小技巧

				
			

			

				

					JackieDYH的博客
				

				

					02-19
					
					1353
					
				

			

		

		

			
				
vertical-align属性：

 设置元素的垂直对齐方式


  vertical-align: baseline; 将元素放在父元素的基线上 默认值
  vertical-align: top; 顶端对齐
  vertical-align: middle; 中部对齐
  vertical-align: bottom; 底部对齐

  vertical-align: s...

			
		

	





	

		

			

				
					
CSS深入理解之vertical-align

				
			

			

				

					literarygirl的博客
				

				

					02-13
					
					1164
					
				

			

		

		

			
				
一、了解vertical-align支持的属性值以及组成
vertical-align的各类属性值
vertical-align的属性值可以归为以下4类：

线类，如 baseline(默认值)、top、middle、bottom；
文本类，如 text-top、text-bottom；
上标下标类，如 sub、super；
数值百分比类，如 10px、1em、5%；

数值百分比类：其实属于两大类，数值类和百分比类。合在一起是因为它们有很多共性，都带数字；都支持负值；行为表现一致（在baseline对齐基

			
		

	





	

		

			

				
					
    vertical-align: sub

					
最新发布

				
			

			

				

					08-19
				

			

		

		

			
				
vertical-align: sub 是CSS中的一个属性，用于设置元素的垂直对齐方式。当设置为 sub 时，元素的基线会与父元素的基线对齐，但会稍微向下偏移，使得该元素显示在正常基线的下方一些位置。这个属性通常用于在HTML文档...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值