CSS 对齐

在网页设计和CSS的上下文中，对齐（alignment）指的是布局中元素或内容相对于特定的指南或参考点的定位和排列。通过确保元素相对于彼此或布局结构以一致和和谐的方式定位，对齐可用于创建视觉上愉悦和有组织的设计。

对齐可应用于各种类型的元素，包括文本、图片、按钮等，以创建一个连贯和精致的设计。CSS提供了各种属性，可以用于对齐这些元素。

对齐有两个主要方面：

水平对齐

这指的是沿水平轴排列元素的位置，水平轴通常从左到右。常见的水平对齐选项包括：

左对齐 ：元素相对于容器或布局的左侧对齐。
居中对齐 ：元素在容器或布局的水平中心位置。
右对齐 ：元素相对于容器或布局的右侧对齐。

垂直对齐

这指的是沿垂直轴排列元素的位置，垂直轴通常从顶部到底部。常见的垂直对齐选项包括：

顶部对齐 ：元素相对于容器或布局的顶部对齐。
中间或居中对齐 ：元素在容器或布局的垂直中心位置。
底部对齐 ：元素相对于容器或布局的底部对齐。

CSS 对齐 – 使用position

通过使用CSS属性 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>Right align</h3>
      <strong>Right align with position:absolute</strong>
   </div>
   <div class="left-alignment">
      <h3>Left align</h3>
      <strong>Left align with position:relative</strong>
   </div>
   <div class="center-alignment">
   <h3>Center align</h3>
   <strong>Vertically & horizontally centered using position:relative and margin:auto.</strong>
  </div>
</body>
</html>

绝对定位的元素被从正常流中移除，可以重叠其他元素。

CSS对齐 – 使用float

通过使用CSS属性 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>Right align</h3>
      <strong>Right align with float:right</strong>
   </div>
   <div class="left-alignment">
      <h3>Left align</h3>
      <strong>Left align with float:left</strong>
   </div>
</body>
</html>

CSS对齐 – 使用 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>Right align</h3>
      <strong>Text right aligned</strong>
   </div>
   <div class="left-alignment">
      <h3>Left align</h3>
      <strong>Text left aligned</strong>
   </div>
   <div class="center-alignment">
      <h3>Center align</h3>
      <strong>Text center aligned</strong>
   </div>
</body>
</html>

CSS居中 – 使用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>Vertically centerd using padding.</p>
   </div>
</body>
</html>

以下是一个示例，如果您想将文本垂直和水平居中，您需要使用 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>Vertically & horizontally centerd using padding and text-align properties.</p>
   </div>
</body>
</html>

这是一个例子，如果你想使文本在垂直和水平方向上居中，可以使用 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>Vertically & horizontally centered using flex and justify-content.</p>
   </div>
</body>
</html>

CSS对齐 – 关联属性

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

序号	属性	描述
1	align-content	沿着交叉轴对齐 flex 容器的内容，或者对齐网格的块轴。
2	align-items	控制 flex 容器中项目在交叉轴上的对齐方式。
3	align-self	控制容器中单个项目的对齐方式。
4	vertical-align	确定行内、行内块或表格单元文本的垂直对齐方式。
5	line-height	设置文本行之间的距离。
6	text-align	设置行内、行内块或表格单元文本的水平对齐方式。
7	margin	缩写形式的 margin 值，可修改对齐方式。