Css 简明教程

CSS - Align

排列这个术语在网页设计和 CSS 中，是指在布局中排列和放置元素或内容，通常要参照特定指南或参考点。排列用于创建一个赏心悦目的有序设计，它确保以一致且和谐的方式将元素相对定位于彼此或布局结构。

排列可以应用于各种类型的元素，包括文字、图像、按钮等，以此来创建一个有凝聚力和完善的设计。CSS 提供了各种属性，可用于排列元素。

对齐包括两个主要方面：

Horizontal alignment ：是指元素沿水平轴的定位，通常从左到右。常见的水平对齐选项包括：@ {s1}：元素与容器或布局的左侧对齐。@ {s2}：元素与容器或布局水平居中。 Right alignment ：元素与容器或布局的右侧对齐。
Vertical alignment ：是指元素沿垂直轴的定位，通常从上到下。常见的垂直对齐选项包括： Top alignment ：元素与容器或布局顶部对齐。 Middle or Center alignment ：元素与容器或布局垂直居中。 Bottom alignment ：元素与容器或布局底部对齐。

CSS Align - position Property

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

通过使用 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>

Note: 绝对定位的元素从常规流程中移除，并且可以重叠元素。

CSS Align - float Property

通过使用 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>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 Align - text-align Property

若要对齐元素内部的文本，请使用属性 * 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 Align - padding Property

可以使用 * 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>

CSS Align - Center Text

以下是一个示例，如果您想要垂直和水平居中文本，您需要使用 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>

CSS Align - justify-content Property

以下是一个示例，如果您想使用 * 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>