文本對齊

開放

6.1 text-align 屬性

文本對齊 是網頁設計中幾乎最重要的一個方面,它允許你控制文本在容器中的定位。CSS 提供了兩個主要屬性來處理文本對齊: text-alignvertical-align。這些屬性分別讓你可以管理文本的水平和垂直對齊。

text-align 屬性管理元素塊內的水平文本對齊。 它決定文本如何相對於元素邊界對齊。

  • left: 文本左對齊(默認對於從左到右的文本)
  • right: 文本右對齊(默認對於從右到左的文本)
  • center: 文本居中
  • justify: 文本兩端對齊,在單詞間添加空格來均勻分配文本於整個容器寬度
  • start: 文本按照開始(左或右邊,取決於文本方向)對齊
  • end: 文本按照結束(右或左邊,取決於文本方向)對齊

使用範例:

CSS
.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.justify {
  text-align: justify;
}
HTML
<body>
  <p class="left">這段文字是左對齊的。</p>
  <p class="right">這段文字是右對齊的。</p>
  <p class="center">這段文字是居中的。</p>
  <p class="justify">這段文字是對齊兩端的。它會拉伸到填滿整個容器寬度。</p>
</body>

6.2 vertical-align 屬性

vertical-align 屬性管理元素相對於其父元素基線的垂直對齊。 它通常用於對齊內聯元素,如圖像、文本行或表格,垂直於一行文本或其他容器中。

值:

  • baseline: 按父元素的基線對齊(默認值)
  • sub: 如下標對齊
  • super: 如上標對齊
  • text-top: 按父元素字體的頂部對齊
  • text-bottom: 按父元素字體的底部對齊
  • middle: 按父元素的中間對齊
  • top: 按容器的頂部對齊
  • bottom: 按容器的底部對齊
  • 百分比值: 相對於行高偏移元素特定百分比

使用範例:

CSS
.container {
  height: 100px;
  border: 1px solid #000;
}

.baseline {
  vertical-align: baseline;
}

.sub {
  vertical-align: sub;
}

.super {
  vertical-align: super;
}

.text-top {
  vertical-align: text-top;
}

.text-bottom {
  vertical-align: text-bottom;
}

.middle {
  vertical-align: middle;
}

.top {
  vertical-align: top;
}

.bottom {
  vertical-align: bottom;
}

.percent-50 {
  vertical-align: 50%;
}
HTML
<body>
  <div class="container">
    <span class="baseline">baseline</span>
    <span class="sub">sub</span>
    <span class="super">super</span>
    <span class="text-top">text-top</span>
    <span class="text-bottom">text-bottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
    <span class="percent-50">50%</span>
  </div>
</body>
1
任務
Frontend SELF TW,  等級 15課堂 1
上鎖
水平對齊
水平對齊
1
任務
Frontend SELF TW,  等級 15課堂 1
上鎖
垂直對齊
垂直對齊
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言