這篇文章主要介紹“css如何設(shè)置文本兩端對(duì)齊”，在日常操作中，相信很多人在css如何設(shè)置文本兩端對(duì)齊問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css如何設(shè)置文本兩端對(duì)齊”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站10多年企業(yè)網(wǎng)站設(shè)計(jì)服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站設(shè)計(jì)及推廣,對(duì)塔吊租賃等多個(gè)領(lǐng)域擁有多年的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

設(shè)置方法：1、給文本元素添加“text-align: justify;”樣式；2、給文本元素添加“justify-content: space-around;”或“justify-content: space-between;”樣式。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

方法1：使用text-align屬性

假如我們有如下HTML：

這世間唯有夢(mèng)想和好姑娘不可辜負(fù)！

給它加點(diǎn)樣式

p{
  width:500px;
  border:1px solid red;
  text-align: justify;
  }

初始效果是這樣的

text-align: justify這是什么東西？CSS2中text-align有一個(gè)屬性值為justify，為對(duì)齊之意。其實(shí)現(xiàn)的效果就是可以讓一行文字兩端對(duì)齊顯示（文字內(nèi)容要超過(guò)一行）。

但是光使用它依然沒(méi)什么卵用…..

要使文字兩端對(duì)齊，我們還得使用一個(gè)行內(nèi)空標(biāo)簽來(lái)助陣，比如、等等，這里是我用標(biāo)簽

這世間唯有夢(mèng)想和好姑娘不可辜負(fù)！

給這個(gè) i 標(biāo)簽設(shè)置如下樣式

p i{
  display:inline-block;
  /*padding-left: 100%;*/
  width:100%;}

padding-left: 100%和width:100%都可以達(dá)到效果，選用其一即可。效果如下

方法2：使用justify-content屬性

CSS3新增的flex布局下，有一個(gè)justify-content屬性，此屬性可以控制伸縮項(xiàng)目的水平對(duì)齊方式。其中有兩個(gè)值，可以實(shí)現(xiàn)兩端對(duì)齊。

但是justify-content存在兼容性問(wèn)題，IE10以上，F(xiàn)F，Chrome都支持。而所有瀏覽器都支持text-align屬性

justify-content: space-around。 伸縮項(xiàng)目會(huì)平均地分布在伸縮容器內(nèi)，兩端保留一半的空間。

justify-content: space-between。伸縮項(xiàng)目會(huì)平均地分布在伸縮容器內(nèi)，第一個(gè)伸縮項(xiàng)目在伸縮容器的左邊緣，最后一個(gè)伸縮項(xiàng)目在伸縮容器的右邊緣。

到此，關(guān)于“css如何設(shè)置文本兩端對(duì)齊”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！