对齐是确定元素（例如文本和图像、按钮和内容框）放置位置的关键。响应式设计的一个关键组成部分是网站上项目的排列。这是因为当从屏幕尺寸较小的设备（例如智能手机）打开网站时，网站的布局和结构将根据您预先计划的进行调整。
但是，此更改将对项目之间和内部的间距以及它们的对齐和定位方式产生影响。您可能会发现无法单击或填写按钮或表单，或者如果对齐不正确，屏幕上会丢失一半文本。
在本文中，我们将讨论如何在分割元素中垂直对齐图像。当照片垂直对齐时，它们会组织成列。这称为图像的垂直对齐。图像可以与任何文本或其他图像本身垂直对齐。这可以通过使用一些 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> 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> 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> 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>
结论
在本文中，我们讨论了在延伸到整个网页的部分中垂直对齐图像的不同方法。
以上就是如何垂直对齐延伸到整个网页的部分中的图像？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何垂直对齐延伸到整个网页的部分中的图像？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
