資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
