极客教程HTML 如何把一个项目设置为其默认值进行对齐
在CSS中，将一个项目对准其默认值意味着确保该项目保持父容器的 “align-items “属性所指定的对齐方式。align-items “的默认值是 “stretch”，但你可以将其设置为其他值，如 “center”、”flex-start “等等。
方法
我们有三种不同的方法来将一个项目设置为CSS中的默认值，包括–对齐
- 使用 “align-items:stretch”。
-
使用 “align-self:auto”。
-
使用 “vertical-align:baseline”。
方法1：使用 “align-items:stretch”
在CSS中设置为默认值的对齐项目的第一种方法是，CSS中的 “alignitems:stretch “属性用于拉伸容器中的项目，以填满容器的全部高度。这是flex容器中 “align-items “属性的默认值。当一个项目被设置为这个值时，它将被拉伸以填充容器的全部高度，而不考虑其自身的尺寸。
例子
在这里，我们将通过一个逐步的例子来实现这种方法 −
第1步 --使用 “display: flex “属性将容器定义为一个柔性容器。这样就可以在容器及其子项上使用Flexbox布局。
.container {
display: flex;
第2步 --在style.css文件中，使用 align-items:stretch ，告诉浏览器将容器内的项目拉伸至充满容器的高度。
align-items: stretch;
第3步 --将 “容器 “类元素内的项目对准包含子元素的容器的延伸部分。
<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中，将一个项目设置为默认值的第二种方法是，CSS中的 “align-self:auto “属性被用来在网格容器中对齐一个单一的网格项目。值auto被用来将一个网格项目的对齐设置为其默认值，该值由网格容器上的align-items属性的值决定。
例子
在这里，我们将通过一个逐步的例子来实现这种方法 −
第1步 --代码从项目的类选择器开始。
.item
第2步 - 在style.css文件中，使用 align-self:auto 属性设置为 “auto”，这意味着单个项目将继承父容器的 “align-items “属性值。
align-self: auto;
第3步 --将 “容器 “类元素内的项目与包含子元素的容器的自动对齐。
<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>
方法三：使用 “vertical-align:baseline”
在CSS中设置为默认值的第三种对齐方法是CSS中的 “verticalalign:baseline “属性，用于在容器中垂直对齐元素。该属性的 “baseline “值将元素的基线与父容器的基线对齐。
例子
在这里，我们将通过一个逐步的例子来实现这种方法 −
第1步 --创建一个显示属性为 “table-cell “的容器。在flexbox布局中不支持垂直对齐属性，它用于table-cell布局。
#container {
display: table-cell;
}
第2步 - 在style.css文件中，在单个项目上使用 align-self:auto 属性为 “baseline”。
.item {
vertical-align: baseline;
}
第3步 --将 “容器 “类元素内的项目与包含子元素的容器基线对齐。
<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用于垂直对齐容器中的元素。