在网页设计和 CSS 中，术语"align"是指布局中元素或内容的定位和排列，通常与特定的准则或参考点相关。对齐用于通过确保元素相对于彼此或以一致和谐的方式相对于布局结构定位来创建视觉上令人愉悦且有组织的设计。

对齐可以应用于各种类型的元素，包括文本、图像、按钮等，以创建有凝聚力和精美的设计。 CSS 提供了各种可用于对齐元素的属性。

对齐有两个主要方面:

  • 水平对齐:这指元素沿水平轴的定位，通常从左到右。常见的水平对齐选项包括:

    • 左对齐:元素与容器或布局的左侧对齐。

    • 中心对齐:元素水平放置在容器或布局的中心。

    • 右对齐:元素与容器或布局的右侧对齐。

  • 垂直对齐:这是指元素沿垂直轴的定位，通常从上到下。常见的垂直对齐选项包括:

    • 顶部对齐:元素与容器或布局的顶部对齐。

    • 中间或 居中对齐:元素在容器或布局内垂直居中。

    • 底部对齐:元素与容器或布局的底部对齐。

CSS 对齐: position属性

有多种方法可以将元素左对齐。让我们看看实现此目的的几种方法。

通过使用 CSS 属性 position，可以实现元素的对齐。

下面是使用position设置对齐的示例:

<html>
<head>
<style>
   .right-alignment {
      position: absolute;
      right: 0px;
      width: 100px;
      border: 3px solid #0d1601;
      background-color: rgb(244, 244, 135);
      padding: 10px;
   }
   .left-alignment {
      position: relative;
      left: 0px;
      width: 100px;
      border: 3px solid #0c1401;
      background-color: blanchedalmond;
      padding: 10px;
   }
   .center-alignment {
      margin: auto;
      border: 3px solid black;
      padding: 5px;
      background-color: rgb(241, 97, 126);
      width: 120px;
      position: relative;
   }
</style>
</head>
<body>
   <div class="right-alignment">
      <h3>右对齐</h3>
      <strong>右对齐position:absolute</strong>
   </div>
   <div class="left-alignment">
      <h3>左对齐</h3>
      <strong>左对齐 position:relative</strong>
   </div>
   <div class="center-alignment">
   <h3>中间对齐</h3>
   <strong>使用position:relative和margin:auto垂直和水平居中。</strong>
  </div>
</body>
</html>

注意:绝对定位的元素将从正常流中删除，并且可以重叠元素。

CSS align: float 属性

使用CSS属性float，可以调整元素的对齐方式。

下面是使用 float 设置对齐方式的示例:

<html>
<head>
<style>
   .right-alignment {
      float: right;
      width: 100px;
      border: 3px solid #0d1601;
      background-color: rgb(244, 244, 135);
      padding: 10px;
   }
   .left-alignment {
      float: left;
      left: 0px;
      width: 100px;
      border: 3px solid #0c1401;
      background-color: blanchedalmond;
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="right-alignment">
      <h3>右对齐</h3>
      <strong>右对齐 float:right</strong>
   </div>
   <div class="left-alignment">
      <h3>左对齐</h3>
      <strong>左对齐 float:left</strong>
   </div>
</body>
</html>

CSS align: text-align 属性

要对齐元素内的文本，请使用属性 text-align。

以下是在 <div> 元素内对齐文本的示例:

<html>
<head>
<style>
   div {
      width: 300px;
      border: 3px solid #0d1601;
      padding: 10px;
      margin-bottom: 1cm;
   }
   .right-alignment {
      text-align: right; 
      color:red;
   }
   .left-alignment {
      text-align:left;
      color:green;
   }
   .center-alignment {
      text-align: center;
      color:blue;
   }
</style>
</head>
<body>
   <div class="right-alignment">
      <h3>右对齐</h3>
      <strong>文本 右对齐</strong>
   </div>
   <div class="left-alignment">
      <h3>左对齐</h3>
      <strong>文本 左对齐</strong>
   </div>
   <div class="center-alignment">
      <h3>中间对齐</h3>
      <strong>文本 中间对齐</strong>
   </div>
</body>
</html>

CSS align: padding 属性

可以使用 padding CSS 属性将一段文本垂直居中。

<html>
<head>
<style>
   .center-alignment { 
      padding: 100px 0;
      border: 3px solid black; 
      margin: 5px;
      background-color: lightblue;
   }
</style>
</head>
<body>
   <div class="center-alignment">
      <p>使用内边距垂直居中。</p>
   </div>
</body>
</html>

CSS align: 居中文本

这里是一个示例，如果您希望文本垂直和水平居中，则需要使用 text-align:center 和 padding:

<html>
<head>
<style>
   .center-alignment { 
      padding: 100px 0;
      text-align: center;
      border: 3px solid black; 
      margin: 5px;
      background-color: lightblue;
   }
</style>
</head>
<body>
   <div class="center-alignment">
      <p>使用填充和文本对齐属性垂直和水平居中。</p>
   </div>
</body>
</html>

CSS align-justify-content 属性

这里是一个示例，如果您想要使文本垂直和水平居中，请使用 flex 和 justify-content 属性:

<html>
<head>
<style>
   .center-alignment {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      border: 3px solid black; 
      font-size: larger;
      background-color: lightblue;
   }
</style>
</head>
<body>
   <div class="center-alignment">
      <p>使用 flex 和 justify-content 垂直和水平居中。</p>
   </div>
</body>
</html>

CSS align: 相关属性

下表列出了与对齐相关的所有属性:

属性描述
align-items控制 Flex 容器的项目沿横轴的对齐方式。
align-self控制容器内单个项目的对齐方式。
vertical-align确定内联、内联块或表格的垂直对齐方式单元格文本。
line-height设置文本行之间的距离.
text-align设置内联、内联-的水平对齐方式块或表格单元格文本。
margin可以修改的边距值的简写对齐方式。