如何垂直对齐延伸到整个网页的部分中的图像？-css教程-PHP中文网

使用CSS的vertical-align属性

语法

示例

Vertical Alignment

使用 CSS Flexbox

Vertical alignment of images using CSS flexbox

使用 CSS 网格

Vertical alignment of images using CSS Grid

结论

首页

web前端

css教程

如何垂直对齐延伸到整个网页的部分中的图像？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 pm 05:09 PM

如何垂直对齐延伸到整个网页的部分中的图像？

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

但是，此更改将对项目之间和内部的间距以及它们的对齐和定位方式产生影响。您可能会发现无法单击或填写按钮或表单，或者如果对齐不正确，屏幕上会丢失一半文本。

在本文中，我们将讨论如何在分割元素中垂直对齐图像。当照片垂直对齐时，它们会组织成列。这称为图像的垂直对齐。图像可以与任何文本或其他图像本身垂直对齐。这可以通过使用一些 CSS 属性来实现，例如 CSS grid、CSS flexbox、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 id="Vertical-Alignment"> 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 是一个包含许多 Flex 元素的容器。弹性元素可以根据需要排列成行或列。 Flex 容器是父元素，而 Flex 项目是它们的子元素。

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

Flex 容器有多种属性。下面提到了它们 -

Flex-direction – 用于指示容器堆叠 Flex 组件的方向。值 – 列、列反转、行、行反转
Flex-wrap – 用于指定或确定 Flex 项目是否需要包装。值 – 换行、现在换行
Flex-flow – 它使开发人员能够同时指定 flex-direction 和 flexwrap。值 – 行换行、列换行等，
Align-items – 能够确定弹性项目的对齐方式
值 – 中心、flex-start、flex-end、space-around 等，
Flex-basis – 用于指定弹性项目的尺寸。
值 - 可以是长度（cm、px、em）或百分比。
Justify-content – 它也用于弹性项目的对齐。
值 – 居中、flex-start、flex-end、space-around 等，
Flex-shrink – 接受数字作为值。如果某项的值为 3，则其收缩量将是值为 1 时的三倍。
顺序 - 它指定 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 id="Vertical-alignment-of-images-using-CSS-flexbox"> 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 网格功能，无需使用浮动和定位即可更轻松地构建网页，该功能允许开发人员建立基于网格的行和列布局系统。网格容器是父元素。 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 id="Vertical-alignment-of-images-using-CSS-Grid"> 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>

登录后复制