CSS 如何在延伸到整个网页的部分垂直对齐一幅图像

对齐是决定将你的元素放在哪里的关键，如文本和图像、按钮和内容框。响应式设计的一个关键组成部分是你网站上项目的排列。这是因为，当网站从屏幕尺寸较小的设备（如智能手机）上打开时，网站的布局和结构将调整为你预先计划好的内容。

然而，这种变化将对项目之间和项目内部的间距以及它们的对齐和定位方式产生影响。你可以看到按钮或表格无法被点击或填写，或者如果你的对齐方式不正确，你的一半文本就会从屏幕上消失。

在这篇文章中，我们将讨论关于如何在分部元素中垂直对齐图片。当照片被垂直对齐时，它们被组织成列。这被称为图像的垂直对齐。图像可以与任何文本或其他图像本身垂直对齐。这可以通过使用一些CSS属性来实现，如CSS grid、CSS flexbox、 vertical-align等。

使用CSS的垂直对齐属性

Vertical-align - 一个元素的垂直对齐是通过CSS的这个属性来设置的。

语法

element{
   vertical-align: values;
}

数值可以是以下方式 –

Length–按指定的长度提升或降低元素。
％- 提升或降低元素的长度
Top, middle, bottom, baseline等。
Initial
Inherit

例子

在这里，我们使用 垂直对齐 属性将图片和文本垂直对齐。

<!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 – 它被用来指示容器将堆叠Flex组件的方向。值–列，列-反向，行，行-反向
Flex-wrap – 它用于指定或确定柔性项目是否需要被包裹。值 – 包裹，现在包裹
Flex-flow – 它使开发者能够同时指定flex-direction以及flexwrap。值–行wrap，列nowrap等。
Align-items – 使得可以确定柔性项目的对齐方式
Values — 居中，flex-start，flex-end，space-around等。
Flex-basis – 用于指定柔性项目的尺寸。
**Values ** - 可以是长度（cm，px，em）或百分比。
Justify-content – 它也被用来对柔性项目进行对齐。
**Values ** - 居中，柔性开始，柔性结束，环绕空间等。
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网格

由于有了CSS Grid功能，构建网页时不需要使用浮动和定位，这就更简单了，它允许开发者建立一个基于网格的行和列的布局系统。grid-container是父元素， ** Display: 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>