CSS 如何在横跨整个网页的区域中垂直对齐图像

对齐是确定放置元素（如文本、图像、按钮和内容框）的关键。响应式设计的一个关键组成部分是你网站上物品的布局。这是因为网站的布局和结构将根据你事先计划的方式调整，在较小的屏幕尺寸设备（如智能手机）上打开时。

然而，这种变化将对物品之间以及内部和外部的间距以及对齐和定位方式产生影响。如果对齐不正确，您可能会发现按钮或表单无法点击或填写，或者屏幕上有一半的文本缺失。

在本文中，我们将讨论如何在区域元素中垂直对齐图像。当照片在垂直方向上对齐时，它们被组织成列。这被称为图像的垂直对齐。这些图像可以与任何文本或其他图像本身进行垂直对齐。可以通过使用一些CSS属性来实现，如CSS网格、CSS弹性盒、vertical-align等。

使用CSS的vertical-align属性

vertical-align - 使用CSS的这个属性设置元素的垂直对齐方式。

语法

element{
   vertical-align: values;
}

值可以通过以下方式进行设置−

长度-将元素上抬或下沉指定长度
百分比-上抬或降低元素
顶部、中部、底部、基线等
初始值
继承

示例

在这里，我们使用 vertical-align 属性将图像与文本垂直对齐。

<!DOCTYPE html>
<html>
<head>
   <title> Vertical Alignment </title>
   <style>
      body {
         background: rgb(200, 221, 220);
      }
      h1{
         text-align: center;
         color: #00FF00;
         text-decoration: underline;
      }
      .main {
         border: 1px solid black;
         height: 70%;
         width: 90%;
         padding: 15px;
         margin-top: 10px;
         margin-right: -5px;
         border-radius: 5px;
      }
      .main img {
         width: 40%;
         height: 8%;
         padding: 2px;
         border-radius: 7px;
      }
      span {
         padding: 55px;
         font-size: 25px;
         color: #097969;
         vertical-align: 100%;
         font-family: Brush Script MT;
         font-weight: 900;
      }
      img{
         width: 100%;
         height: 100%;
      }
   </style>
</head>
<body>
   <h1> Vertical Alignment </h1>
   <div class= "main">
      <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "tutorialspoint">
      <span>Welcome to Tutorialspoint </span>
   </div>
</body>
</html>

使用CSS Flexbox

使用CSS Flexbox和CSS Grid可以垂直对齐一系列元素。

CSS Flexbox是一个包含多个弹性元素的容器。弹性元素可以根据需要排列成行或列。弹性容器是父元素，而弹性项是它们的子元素。

display:flex 允许开发者样式化每个组件，使其看起来合适和吸引人。它将元素的子元素排列在行或列中。

有各种各样的弹性容器属性。它们如下所示：

Flex-direction - 用于指示容器将如何堆叠弹性组件。值 – column、column-reverse、row、row-reverse
Flex-wrap - 用于指定弹性项是否需要换行。值 – wrap、nowrap
Flex-flow - 允许开发者同时指定flex-direction和flex-wrap。值 – row wrap、column nowrap等
Align-items - 确定弹性项的对齐方式
值 - center、flex-start、flex-end、space-around等
Flex-basis - 用于指定弹性项的尺寸
值 - 可以是长度（cm、px、em）或百分比
Justify-content - 也用于对齐弹性项
值 - center、flex-start、flex-end、space-around等
Flex-shrink - 接受数字作为值。如果一个项的值为3，则它会比值为1的项收缩三倍。
Order - 指定弹性元素的对齐顺序

示例

<!DOCTYPE html>
<html>
<head>
   <title> Vertical alignment of series of images </title>
   <style>
      body {
         background: rgb(200, 221, 220);
      }
      h1{
         text-align: left;
         margin: 15px;
         color: green;
         text-decoration: underline;
      }
      h2{
         margin: 15px;
      }
      .main {
         border: 1px solid black;
         height: 55%;
         width: 20%;
         padding: 25px;
         margin: 10px;
         border-radius: 5px;
      }
      .main img {
         width: 100px;
         height: 110px;
         padding: 3px;
         border-radius: 7px;
      }
      .main{
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
   </style>
</head>
<body>
   <h2> Vertical alignment of images using CSS flexbox </h2>
   <div class= "main">
      <img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
      <img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
      <img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
   </div>
</body>
</html>

CSS Grid的使用

借助CSS Grid功能，无需使用浮动和定位即可更简单地构建网页，它允许开发者使用行和列来建立基于网格的布局系统。网格容器是父元素。 ** 显示：grid** 用于将元素创建为网格。

以下是一些CSS网格属性：

grid-template-columns - 用于创建列。值可以是长度、百分比等。
grid-template-rows - 用于创建行。值可以是长度、百分比等。
grid-gap - 用于同时设置列间隔和行间隔的简写属性。

示例

<!DOCTYPE html>
<html>
<head>
   <title> Vertical alignment of images using CSS Grid </title>
   <style>
      body {
         background: rgb(200, 221, 220);
      }
      h1{
         text-align: left;
         margin: 15px;
         color: green;
         text-decoration: underline;
      }
      h2{
         margin: 15px;
      }
      .main {
         border: 1px solid black;
         height: 55%;
         width: 30%;
         padding: 15px;
         margin: 10px;
         border-radius: 5px;
         display: grid;
         grid-template-rows: 35% 35%;
      }
      .main img {
         width: 150px;
         height: 110px;
         padding: 2px;
         border-radius: 7px;
      }
   </style>
</head>
<body>
   <h2> Vertical alignment of images using CSS Grid </h2>
   <div class= "main">
      <img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
      <img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
      <img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
   </div>
</body>