CSS - 對齊

在網頁設計和 CSS 的上下文中，對齊是指在佈局中元素或內容的定位和排列，通常相對於特定的指導原則或參考點。對齊用於透過確保元素相對於彼此或相對於佈局結構以一致和諧的方式定位來建立視覺上令人愉悅且組織良好的設計。

對齊可以應用於各種型別的元素，包括文字、影像、按鈕等等，以建立具有凝聚力和精細的設計。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>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設定對齊方式的示例

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

CSS 對齊 - 居中文字

如果您想同時垂直和水平居中文字，則需要結合使用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 對齊 - 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>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	外邊距值的簡寫，可以修改對齊方式。

列印頁面