如何使用 CSS 垂直对齐图像旁边的文本？

简介：我们经常向我们的网站添加图像，有时该文本需要在图像旁边垂直对齐。例如，在用户的个人资料图片的情况下，用户的名字应该在他/她的个人资料图片之后可见，并且应该垂直对齐。在本文中，我们将看到如何使用各种方法在图像旁边对齐文本。

方法：有两种方法可用于垂直对齐图像旁边的文本，如下所示：

• 使用弹性盒
• 使用垂直对齐 CSS 属性

使用flexbox ：在这种方法中，我们将使用 flexbox。为此，我们将结合使用 CSS display 属性和align-items属性。我们需要创建一个包含图像和文本的父元素。在使用 display: flex;将父元素声明为 flexbox 之后；我们可以使用align-items: center; 将项目对齐到中心。 .

句法：

.class_name { 
    display: flex;
    align-items:center;
}

示例：此示例使用 flexbox 使用 CSS 垂直对齐图像旁边的文本。

   

    
      
    

   

    

        
              
        GeeksforGeeks
    

  

输出：

使用vertical-align CSS 属性：在这种方法中，我们不需要将元素包装在父元素中，并使用vertical-align属性直接垂直对齐元素。

句法：

.class_name { vertical-align: middle; } 

示例：此示例使用 vertical-align 属性使用 CSS 垂直对齐图像旁边的文本。

   

    
      
    

   

    
              
    
        GeeksforGeeks (using vertical-align)
    

   

输出：