iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 18
1
Modern Web

鉄人28号FX系列 第 18

鉄人28号FX 鉄人18号「左右蛙」text-align, text-align-last

★ 地圖西北方峽谷森林 ↓↓↓

顯示峽谷森林位置圖

睡前數羊數著數著……天就亮了。

眼前好美啊!
痾?? )

峽谷瀑布 [左右蛙]
為什麼總是一再找麻煩?
你就不能配合些?!


★★★ 關卡條件 ↓↓↓

水平對齊 (text-align)

屬性設置塊框元素或表格單元框內,行內文本的水平對齊方式,用來統一控制文本如齊左等,如需針對塊框元素本身進行對齊,請使用外距屬性如 margin: auto

  • start:初始值,從起始位置排序,配合橫直書寫模式,更利於共同設定 (各種語言)。
  • end:若橫式書寫方向,行內文本起始位置由左至右,則靠右齊行。
  • center:文本內容在行框內居中位置。
  • justify:使其文本內容與行框的左右邊緣貼齊,針對每個行框內,單詞之間的距離進行平均分配。(末行除外)

text-align


末行對齊 (text-align-last)

描述的是每個段落的最後一行 (段落結尾) 或在被強制斷行 (<br>) 之前所在行的對齊規則。

auto | start | end | left | right | center | justify

text-align
註:編輯軟體大都可以看到類似此介面功能選項,皆可達到同等效用。


峽谷瀑布 [左右蛙]
少瞧不起人。只要我們兄弟聯手,
沒什麼能難倒我們的。

:什麼拉! 我都沒說??
還一搭一唱。)

超完美。是不是!!!
...
...

text-align-last

<nav>
  <a href="##">Home</a> <a href="##">News</a> <a href="##">About</a>
</nav>
nav { text-align-last: justify; }
nav a { background: #6200ff; color: #fff; }

Σヽ(゚Д ゚; )ノ
真的都齊行了! 單行導覽列選單!! 末行資訊齊右!!!

但總覺得哪裡怪怪的?
傳送卷軸 鉄人15号「間距蟻」

To Be Continued ...


[ 追加經驗值 ]
註:參考來源 CSS-Tricks text-align-last
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人17号「垂直虎」vertical-align
下一篇
鉄人28号FX 鉄人19号「字間蜂」text-justify
系列文
鉄人28号FX30

尚未有邦友留言

立即登入留言