首頁 >web前端 >css教學 >CSS中的text-align屬性怎麼用

CSS中的text-align屬性怎麼用

不言
不言原創
2018-12-05 16:11:135012瀏覽

CSS的CSS中的text-align屬性怎麼用屬性可用來設定文字的位置,接下來的這篇文章將跟大家介紹關於CSS中的CSS中的text-align屬性怎麼用屬性的用法,下面我們來看具體的內容。

CSS中的text-align屬性怎麼用

我們先來看一段簡單的程式碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p class="sample1">在此处显示文字</p>
  </body>
</html>

效果如下

CSS中的text-align屬性怎麼用

接著我們基於上述的程式碼來使用CSS中的text-align屬性怎麼用屬性

如果我要將文字放在左側(預設值是左),我們可以這樣寫

p.sample1 {CSS中的text-align屬性怎麼用:left; }

由於預設是左,所以文字位置沒有變化,仍然在左邊

#將文字放在右側##

p.sample1 {CSS中的text-align屬性怎麼用:right; }

在瀏覽器中,文字靠右顯示

CSS中的text-align屬性怎麼用

把文字置中放置

p.sample1 {CSS中的text-align屬性怎麼用:center; }

在瀏覽器中,文字置中顯示


CSS中的text-align屬性怎麼用

均勻的分佈字元


在長英文句子中,justify用於均勻分配字元排列

例如,在下面的句子中,右側有感覺很不整齊。

CSS中的text-align屬性怎麼用

在這種情況下,我們可以將CSS中的text-align屬性怎麼用屬性的值設為justify,然後使用text-justify屬性指定對齊的格式,程式碼如下

p.sample1 {
   CSS中的text-align屬性怎麼用:justify ;   
   text-justify:auto ; 
   }

如果text-justify的值設定為auto,則均勻調整單字和字元間距。

效果如下:右側變得整齊了

CSS中的text-align屬性怎麼用

最後注意一點:以上所有這些設定僅對字串有效,對圖像,塊等是無效的。


以上是CSS中的text-align屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn