如何将文本与图像垂直对齐？

Question

为什么vertical-align: middle 但是， vertical-align: top 不起作用？ <em>确实</em>有效。</p> <p><br />></p>

span{
  垂直对齐：居中；
}</pre>
;
  <img src="https://via.placeholder.com/30" alt="小img" />
  不起作用。
</div></pre>
<p><br />></p>            
            

                

                    
                    2
                

                

                    
                                                    
                                            
                    0
                
                

                    
                                                    
                                            
                    0
                
            
            
            

                

                    
                    

                        P粉360266095
                        

                    
                
                

                    

                    

                        

                            回复
                        
                    
                
            
            

                

                    
全部回复(2)
                    我来回复
                    关闭
                
                


                                

                    
                    

                        

                            

                                P粉1460805562023-08-28 11:32:18
                                2 楼
                            
                            
以下是一些垂直对齐的简单技术：

单行垂直对齐：中间

这个很简单：将文本元素的行高设置为等于容器的行高

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行vertical-align:bottom

相对于其容器绝对定位内部 div

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行vertical-align:middle

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果必须支持旧版本的 IE 


为了使其全面正常工作，您必须对 CSS 进行一些修改。幸运的是，有一个 IE 错误对我们有利。在容器上设置 top:50% ，在内部 div 上设置 top:-50% ，可以获得相同的结果。我们可以使用 IE 不支持的另一个功能将两者结合起来：高级 CSS 选择器。

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可变容器高度vertical-align:middle

此解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用 transform:translateY 属性。 （http://caniuse.com/#feat=transforms2d）

将以下 3 行 CSS 应用于元素将使其在其父元素中垂直居中，无论父元素的高度如何：

position: relative;
top: 50%;
transform: translateY(-50%);
                            

                                 
                                点赞 +0
                                

                                    添加回复
                                    关闭回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                P粉360266095
                                            
                                        
                                        
                                        回复
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                                

                    
                    

                        

                            

                                P粉8912379122023-08-28 09:35:31
                                1 楼
                            
                            
实际上，在这种情况下，它非常简单：对图像应用垂直对齐。由于所有内容都在一行中，因此您实际上要对齐的是图像，而不是文本。



<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>


                            

                                 
                                点赞 +0
                                

                                    添加回复
                                    关闭回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                P粉360266095
                                            
                                        
                                        
                                        回复
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                



                

            
        

Answer 1

以下是一些垂直对齐的简单技术：

单行垂直对齐：中间

这个很简单：将文本元素的行高设置为等于容器的行高

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行vertical-align:bottom

相对于其容器绝对定位内部 div

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行vertical-align:middle

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果必须支持旧版本的 IE

为了使其全面正常工作，您必须对 CSS 进行一些修改。幸运的是，有一个 IE 错误对我们有利。在容器上设置 top:50% ，在内部 div 上设置 top:-50% ，可以获得相同的结果。我们可以使用 IE 不支持的另一个功能将两者结合起来：高级 CSS 选择器。

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可变容器高度vertical-align:middle

此解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用 transform:translateY 属性。 （http://caniuse.com/#feat=transforms2d）

将以下 3 行 CSS 应用于元素将使其在其父元素中垂直居中，无论父元素的高度如何：

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 2

实际上，在这种情况下，它非常简单：对图像应用垂直对齐。由于所有内容都在一行中，因此您实际上要对齐的是图像，而不是文本。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>