Css 简明教程

CSS - Align

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

The term alignment, in context of web design and CSS, refers to the positioning and arrangement of elements or content within a layout, typically with respect to specific guidelines or reference points. Alignment is used to create visually pleasing and organized designs by ensuring that elements are positioned relative to each other or to the layout structure in a consistent and harmonious way.

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

Alignment can be applied to various types of elements, including text, images, buttons, and more, to create a cohesive and polished design. CSS provides various properties that can be used to align the elements.

对齐包括两个主要方面：

There are two main aspects of alignment:

Horizontal alignment: This refers to the positioning of elements along the horizontal axis, which typically runs from left to right. Common horizontal alignment options include: Left alignment: Elements are aligned to the left side of a container or layout. Center alignment: Elements are positioned in the center of a container or layout horizontally. Right alignment: Elements are aligned to the right side of a container or layout.
Vertical alignment: This refers to the positioning of elements along the vertical axis, which typically runs from top to bottom. Common vertical alignment options include: Top alignment: Elements are aligned to the top of a container or layout. Middle or Center alignment: Elements are centered vertically within a container or layout. Bottom alignment: Elements are aligned to the bottom of a container or layout.

CSS Align - position Property

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

There are several ways to align an element to left. Let us see few ways to achieve this.

通过使用 CSS 属性 * position* ，可以调整元素的对齐方式。

With the use of the CSS property position, the alignment of elements can be adjusted.

以下是使用位置设置对齐方式的示例：

Here is an example of setting alignment using 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: 绝对定位的元素从常规流程中移除，并且可以重叠元素。

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

CSS Align - float Property

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

With the use of the CSS property float, the alignment of elements can be adjusted.

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

Here is an example of setting alignment using 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* 。

To align the text inside an element, use the property text-align.

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

Here is an example to align the text inside a <div> element:

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

A piece of text can be centered vertically using padding CSS property.

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

Here is an example if you want to center the text vertically as well as horizontally, you need to use text-align:center along with 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* 属性垂直和水平居中文本：

Here is an example if you want to center the text vertically as well as horizontally, using flex and justify-content properties:

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