CSS - 对齐

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

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

对齐主要有两个方面

水平对齐：这指的是沿水平轴线（通常从左到右）对元素的定位。常见的水平对齐选项包括：
- 左对齐：元素与容器或布局的左侧对齐。
- 居中对齐：元素水平居中于容器或布局。
- 右对齐：元素与容器或布局的右侧对齐。
垂直对齐：这指的是沿垂直轴线（通常从上到下）对元素的定位。常见的垂直对齐选项包括：
- 顶部对齐：元素与容器或布局的顶部对齐。
- 中间或居中对齐：元素垂直居中于容器或布局。
- 底部对齐：元素与容器或布局的底部对齐。

CSS 对齐 - position 属性

有几种方法可以将元素左对齐。让我们看看实现这一点的几种方法。

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

以下是用 position 设置对齐方式的示例

Open Compiler

<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来调整元素的对齐方式。

以下是用float设置对齐方式的示例

Open Compiler

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 对齐 - text-align 属性

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

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

Open Compiler

<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 属性垂直居中一段文本。

Open Compiler

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

CSS 对齐 - 居中文本

如果您想同时垂直和水平居中文本，则需要结合使用text-align:center和padding

Open Compiler

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

CSS 对齐 - justify-content 属性

如果您想使用flex和justify-content属性同时垂直和水平居中文本，可以使用以下示例

Open Compiler

<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 对齐 - 相关属性

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

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

打印页面