CSS中的text-align屬性怎麼用-css教學-PHP中文網

CSS中的text-align屬性怎麼用

不言

發布： 2018-12-06 09:08:22

原創

5015 人瀏覽過

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中文網其他相關文章！