如何美化網頁文字(10)-[text-align]置中、靠左、靠右 - 雲橙雨林

文章推薦指數: 80 %
投票人數:10人

改變文章段落對齊,是文章中常用的方式,可以利用text-align 來做設定,他的屬性有left、right、justify、center,分別為靠左、靠右、左右對齊、置中 ... 關閉廣告 雲橙雨林 跳到主文 在風格設計的轉念間,發現空間無限的美,實現文化豐色的鮮活,展現自我的格調。

部落格全站分類:數位生活 相簿 部落格 留言 名片 Oct10Wed201211:57 如何美化網頁文字(10)-[text-align]置中、靠左、靠右 改變文章段落對齊,是文章中常用的方式,可以利用text-align來做設定,他的屬性有left、right、justify、center,分別為靠左、靠右、左右對齊、置中。

寫段html吧!

魚和橙

text-align

TheresultsofasurveykeywordFridayshowedthat70percentoflocalsalariedemployeesarehesitant(1)aboutgettingmarried,citinginsufficient(2)savingsandjobinstabilityasthereasons.魚橙 TheresultsofasurveykeywordFridayshowedthat70percentoflocalsalariedemployeesarehesitant(1)aboutgettingmarried,citinginsufficient(2)savingsandjobinstabilityasthereasons.魚橙 TheresultsofasurveykeywordFridayshowedthat70percentoflocalsalariedemployeesarehesitant(1)aboutgettingmarried,citinginsufficient(2)savingsandjobinstabilityasthereasons.魚橙 TheresultsofasurveykeywordFridayshowedthat70percentoflocalsalariedemployeesarehesitant(1)aboutgettingmarried,citinginsufficient(2)savingsandjobinstabilityasthereasons.魚橙  先來看輸出吧!   加入css吧!! #line1{ text-align:left; background-color:#F00; } #line2{ text-align:right; background-color:#999; } #line3{ text-align:center; background-color:#0F0; } #line4{ text-align:justify; background-color:#0FF; } 看看結果吧!   前面兩行看不出結果,在最後一行,可以看到設定的結果,加入這樣的css就可改變對齊方式。

而使用 justify他在用於列印程式(word等)是很適合使用的,而在網頁文字的使用上,他的使用效果並不是很明顯,所以通常僅使用leftrightcenter的屬性。

而在正式使用上,文本對齊方向還是都用靠左(預設),所以此功能其實不多用,因為靠左靠右,有時候是用區塊來排版,較為常用。

文章標籤 網頁文字 網頁設計 全站熱搜 創作者介紹 雲橙雨林 雲橙雨林 雲橙雨林發表在痞客邦留言(0)人氣() E-mail轉寄 全站分類:數位生活個人分類:美化網頁文字此分類上一篇:如何美化網頁文字(09)-[line-height]改變文字的行距 此分類下一篇:如何美化網頁文字(07)-[text-decoration]文字底線線和刪除線的作法 上一篇:如何美化網頁文字(09)-[line-height]改變文字的行距 下一篇:如何美化網頁文字(07)-[text-decoration]文字底線線和刪除線的作法 歷史上的今天 2012:如何美化網頁文字(11)-[ul][li][dt][dd]項目分類 2012:如何美化網頁文字(07)-[text-decoration]文字底線線和刪除線的作法 ▲top 留言列表 發表留言 友情連結 銑刀鑽頭銑刀|瑜誠工業|切削刀具製造商雲橙雨林|blogger紫易微經|blogger作品展示|喜漣絲微鑽球銑刀hss鑽頭鎢鋼銑刀玩具模型用鑽頭愛畫字倒角刀 文章分類 CRUDforLaraveL&Vue.js(22)電腦問題(14)遊戲分享(17)Javascript(6)vee-validate(1)Vue.jsComponents(5)Vue.js(6)好用的軟體(2)來說說網頁設計(6)LaravelPHP(14)好物分享(28)icon圖示設計分享(22)邊框美化(4)Html基本說明(20)美化網頁文字(13)mac(1)網頁設計(28)心情故事(44)未分類文章(1) 參觀人氣 本日人氣: 累積人氣: 熱門文章 文章搜尋 誰來我家 最新文章 文章精選 文章精選 2021四月(1) 2020十二月(2) 2020十一月(1) 2020十月(3) 2020五月(1) 2020一月(1) 2019十二月(2) 2019十一月(2) 2019八月(1) 2019七月(2) 2019四月(2) 2018十二月(1) 2018十一月(2) 2018十月(29) 2018九月(23) 2018八月(15) 2018七月(1) 2018六月(5) 2018五月(6) 2018四月(1) 2018三月(8) 2018二月(3) 2018一月(4) 2017十二月(3) 2017十一月(4) 2017十月(12) 2017九月(2) 2017八月(9) 2016三月(2) 2016一月(1) 2015十二月(1) 2015十一月(4) 2014一月(2) 2013十二月(4) 2013十一月(7) 2013十月(11) 2013九月(3) 2013六月(9) 2013五月(5) 2013四月(1) 2013二月(2) 2013一月(1) 2012十一月(4) 2012十月(13) 2012九月(3) 2012八月(7) 2012七月(12) 2012六月(14) 2009三月(1) 2009二月(1) 所有文章列表 回到頁首 回到主文 免費註冊 客服中心 痞客邦首頁 ©2003-2022PIXNET 關閉視窗


請為這篇文章評分?