如何在 CSS 中将项目对齐到其默认值?

htmlcssweb developmentfront end technology更新于 2025/1/7 19:56:17

在 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"属性，该属性用于拉伸容器中的项目以填充容器的整个高度。这是弹性容器中"align-items"属性的默认值。当项目设置为此值时，无论其自身大小如何，它都会拉伸以填充容器的整个高度。

示例

在这里，我们将通过一个逐步示例来实现此方法 -

步骤 1 - 使用"display: flex"属性将容器定义为弹性容器。这使得容器及其子项目能够使用弹性盒布局。

.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>

方法二:使用"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 - 将"container"类元素内的项目与包含子元素的容器的 auto 属性对齐。

<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 中将项目设置为其默认值的第三种方法是使用 CSS 中的"verticalalign:baseline"属性，该属性用于在容器内垂直对齐元素。该属性的"baseline"值将元素的基线与父容器的基线对齐。

示例

在这里，我们将通过一个分步示例来实现此方法 -

步骤 1 - 创建一个容器，并将 display 属性设置为"table-cell"。flexbox 布局不支持vertical-align 属性，该属性用于 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>