搜尋

首頁 >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
上一篇：CSS3如何實現雪花飄落的效果下一篇：CSS3如何實現雪花飄落的效果

相關文章

看更多