数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 CSS 中将项目对齐到其默认值？
在 CSS 中，将项目对齐到其默认值意味着确保项目保持父容器“align-items”属性指定的对齐方式。“align-items”的默认值为“stretch”，但您可以将其设置为其他值，如“center”、“flex-start”等。
方法
我们有三种不同的方法可以在 CSS 中将项目集对齐到其默认值，包括：
使用“align-items:stretch”
使用“align-self:auto”
使用“vertical-align:baseline”
方法 1：使用“align-items:stretch”
在 CSS 中将项目集对齐到其默认值的第一种方法是“align-items:stretch”属性，它用于将容器内的项目拉伸以填充容器的完整高度。这是弹性容器中“align-items”属性的默认值。当项目设置为此值时，它将拉伸以填充容器的完整高度，而不管其自身大小如何。
示例
在这里，我们将逐步介绍一个示例来实现此方法：
步骤 1 - 使用“display: flex”属性将容器定义为弹性容器。这使得能够在容器及其子项目上使用 Flexbox 布局。
.container {
display: flex;
步骤 2 - 在 style.css 文件中，使用align-items:stretch，它告诉浏览器将容器内的项目拉伸以填充容器的完整高度。
align-items: stretch;
步骤 3 - 将“container”类元素内的项目对齐到包含子元素的容器的拉伸。
<div id="container"> <div class="item">Javascript</div> <div class="item">React</div> <div class="item">Angular</div> </div>
步骤 4 - 最终代码如下所示：
index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>Align-items:stretch</title>
<style>
#container {
width: 250px;
height: 150px;
border: 1px solid black;
display: flex;
font-size: 20px;
align-items: stretch;
}
.item {
color: blue;
}
#container div {
flex: 1;
border: 1px solid black;
display: flex;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
方法 2：使用“align-self:auto”
在 CSS 中将项目集对齐到其默认值的第二种方法是“align-self:auto”属性，它用于将单个网格项目对齐到网格容器内。“auto”值用于将网格项目的对齐方式设置为其默认值，该值由网格容器上的“align-items”属性的值确定。
示例
在这里，我们将逐步介绍一个示例来实现此方法：
步骤 1 - 代码以项目的类选择器开头。
.item
步骤 2 - 在 style.css 文件中，使用align-self:auto属性设置为“auto”，这意味着单个项目将继承父容器“align-items”属性的值。
align-self: auto;
步骤 3 - 将“container”类元素内的项目对齐到包含子元素的容器的自动对齐。
<div id="container"> <div class="item">Javascript</div> <div class="item">React</div> <div class="item">Angular</div> </div>
步骤 4 - 最终代码如下所示：
index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>Align-self:auto</title>
<style>
#container {
width: 250px;
height: 150px;
border: 1px solid black;
display: flex;
font-size: 20px;
}
.item {
align-self: auto;
color: blue;
}
#container div {
flex: 1;
border: 1px solid black;
display: flex;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
方法 3：使用“vertical-align:baseline”
在 CSS 中将项目集对齐到其默认值的第三种方法是“vertical-align:baseline”属性，它用于垂直对齐容器内的元素。“baseline”属性的值将元素的基线与父容器的基线对齐。
示例
在这里，我们将逐步介绍一个示例来实现此方法：
步骤 1 - 创建一个容器，并将 display 属性设置为“table-cell”。vertical-align 属性在 flexbox 布局中不受支持，它用于 table-cell 布局。
#container {
display: table-cell;
}
步骤 2 - 在 style.css 文件中，将单个项目的align-self:auto属性设置为“baseline”。
.item {
vertical-align: baseline;
}
步骤 3 - 将“container”类元素内的项目对齐到包含子元素的容器的基线。
<div id="container"> <div class="item">Javascript</div> <div class="item">React</div> <div class="item">Angular</div> </div>
步骤 4 - 最终代码如下所示：
index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>vertical-align:baseline</title>
<style>
#container {
width: 250px;
height: 150px;
border: 1px solid black;
display: table-cell;
font-size: 20px;
}
.item {
vertical-align: baseline;
color: blue;
}
#container div {
flex: 1;
border: 1px solid black;
display: flex;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
结论
在本文中，我们探讨了如何使用不同的方法在 CSS 中将项目集对齐到其默认值，这些方法包括 align-items: stretch 用于垂直对齐容器的所有项目，align-self: auto 用于将单个项目对齐到父容器的默认值，以及 vertical-align: baseline 用于垂直对齐容器内的元素。
646 次浏览
