数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在一个横跨整个网页的区域内垂直对齐图片？
对齐是确定放置元素（如文本和图像、按钮和内容框）位置的关键。响应式设计的关键组成部分是在网站上排列项目。这是因为当从屏幕尺寸较小的设备（例如智能手机）打开网站时，网站的布局和结构将根据您的预先规划进行调整。
但是，这种更改也会影响项目之间和项目内部的间距，以及它们的排列和位置。如果您的对齐不正确，您可能会发现按钮或表单无法点击或填写，或者屏幕上缺少一半文本。
在本文中，我们将讨论如何在 div 元素中垂直对齐图像。当照片垂直对齐时，它们会排列成列。这被称为图像的垂直对齐。图像可以与任何文本或其他图像本身垂直对齐。这可以通过使用一些 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://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://tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
</html>
使用 CSS Grid
由于 CSS Grid 功能，无需使用浮动和定位即可更轻松地构建网页，它允许开发者使用行和列建立基于网格的布局系统。网格容器是父元素。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://tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
结论
在本文中，我们讨论了在横跨整个网页的区域内垂直对齐图像的不同方法。
浏览量：287
