如何在横跨整个网页的部分中垂直对齐图片?

cssweb developmentfront end technology更新于 2025/1/13 17:16:17

对齐是确定元素(例如文本和图片、按钮以及内容框)位置的关键。响应式设计的一个关键组成部分是网站上项目的排列。这是因为当使用屏幕较小的设备(例如智能手机)打开网站时，网站的布局和结构将根据您预先规划的内容进行调整。

但是，这种变化会影响项目之间和内部的间距以及它们的对齐和定位方式。如果对齐不正确，您可能会看到按钮或表单无法点击或填写，或者屏幕上缺少一半的文本。

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

使用 CSS 的垂直对齐属性

垂直对齐 – 元素的垂直对齐方式是使用此 CSS 属性来设置的。属性。

语法

element{
   vertical-align: values;
}

值可以采用以下方式 -

Length - 将元素向上或向下提升指定的长度
% - 提升或降低元素
顶部、中间、底部、基线等
Initial
Inherit

示例

这里，我们使用 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.cainiaomax.com/images/logo.png" alt= "tutorialspoint">
      <span>Welcome to Tutorialspoint </span>
   </div>
</body>
</html>

使用 CSS Flexbox

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

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

display:flex 允许开发人员设置每个组件的样式，使其看起来合适且美观。它将元素的子元素排列成行或列。

Flex 容器有多种属性。它们如下所示 -

Flex-direction – 用于指示容器堆叠 Flex 组件的方向。值 – column、column-reverse、row、row-reverse
Flex-wrap – 用于指定或确定弹性项目是否需要包裹。值 – wrap、nowrap
Flex-flow – 允许开发者同时指定 flex-direction 和 flexwrap。值 – 行换行、列不换行等
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 – 指定 flex 元素的对齐顺序。

示例

<!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.cainiaomax.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
      <img src= "https://www.cainiaomax.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
      <img src= "https://www.cainiaomax.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
   </div>
</body>
</html>

使用 CSS 网格

借助 CSS 网格功能，无需使用浮动和定位即可更轻松地构建网页，该功能允许开发人员建立基于行和列的网格布局系统。网格容器是父元素。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.cainiaomax.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
      <img src= "https://www.cainiaomax.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
      <img src= "https://www.cainiaomax.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
   </div>
</body>