使用CSS 實現標題單行置中多行靠左 - 黑暗執行緒
文章推薦指數： 80 %
跟同事討論到一個需求，要在顯示文章的網頁實現「標題只有一行時置中顯示；若文字較多折行時則靠左對齊」的效果。
起初程序員大腦想到的做法是 ...
跟同事討論到一個需求，要在顯示文章的網頁實現「標題只有一行時置中顯示；若文字較多折行時則靠左對齊」的效果。
起初程序員大腦想到的做法是用JavaScript依文字長度動態調整text-align樣式，但由於折行與否是瀏覽器依字型大小、容器寬度自行裁量，難以依據字數直接推算，於是我開始揣摩由文字元素高度偵測行數的雞鳴狗盜招術...爬文後才發現我把事情想得太複雜了，這個需求用CSS就能搞定，一行程式都不用寫。
做法是用
包住display:inline-block的，將
設成text-align:center，設成text-align:left。
網路盛傳連中樂透頭彩黑大：子虛烏有
延伸文章資訊
- 1如何美化網頁文字(10)-[text-align]置中、靠左、靠右 - 雲橙雨林
改變文章段落對齊，是文章中常用的方式，可以利用text-align 來做設定，他的屬性有left、right、justify、center，分別為靠左、靠右、左右對齊、置中 ...
- 2CSS文字對齊方式(DAY10) - iT 邦幫忙::一起幫忙解決難題
這一篇我們要來了解如何利用CSS將文字水平對齊(置中、靠左、靠右對齊)和垂直對齊，這邊介紹幾個比較重要和常用到的屬性: 水平文字對齊text-align: ...
- 3使用CSS 實現標題單行置中多行靠左 - 黑暗執行緒
跟同事討論到一個需求，要在顯示文章的網頁實現「標題只有一行時置中顯示；若文字較多折行時則靠左對齊」的效果。起初程序員大腦想到的做法是 ...
- 4[CSS學習筆記] 如何版面置中 - 1010Code
文字置中一般文字置中使用text-align 就好比你在word 編輯文字有靠左靠右 ... 內的正中間也就是垂直水平置中，有兩種方法，首先html 標籤都一樣，建立 ...
- 5網頁設計– HTML 文章段落及排版
