如何使用 CSS 在整个网页上垂直跨越的分区中垂直对齐图像？

在本文中，我们将讨论在整个网页上垂直跨越的单个分区中图像的垂直对齐。图像的垂直对齐是指将图像放在一列中。我们经常需要垂直对齐图像以在移动版本上正确显示它，或者有时我们不想插入水平滚动条。为此，我们将使用 CSS flex 属性。

方法：

• 创建一个 div 标签来放置图像。
• 在 标签中，使用src属性提供图像的路径，使用 alt属性提供替代文本。
• 添加 CSS 属性以垂直对齐显示图像。

示例 1：在此示例中，我们使用了说明图像与文本垂直对齐的文本。为此，我们使用了vertical-align CSS 属性来垂直对齐它。

HTML

  
    
    
  
  
  
    

      
      GeeksforGeeks
    
  

输出：从输出中，我们可以看到与文本垂直对齐的图像。

为了垂直对齐一系列图像，我们将结合使用 CSS display 属性与align-items和flex-direction属性。我们需要创建一个父元素。在使用 display: flex;将父元素声明为 flexbox 之后，我们可以使用 align-items: center;将项目与中心对齐。同时使用 flex-direction: column;将列的方向设置为垂直。

句法：

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

我们将在 style 标签中声明 CSS 属性以更改布局。

1. display: flex – CSS 中的 flex 属性用于设置灵活项目的长度，并分别扩展或缩小项目以填充额外空间或防止溢出。
2. flex-direction : column –此属性用于以垂直方式对齐应用它的类的项目。
3. align-items : center –此属性用于在屏幕中央显示项目。

示例 2：在本示例中，我们将使用上述方法垂直显示图像。

HTML

输出：在这里，我们可以看到所有 3 个图像都垂直对齐。

注意：如果我们不需要明确定义图片的大小，图片将覆盖整个网页。图像的大小可能会根据要求而有所不同。

支持的浏览器：

• 谷歌浏览器 29.0
• 火狐 28.0
• 微软边缘 11.0
• Safari 9.0
• 歌剧 17.0