您好,登錄后才能下訂單哦!
這篇文章主要介紹html如何讓段落文本兩端對(duì)齊,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
1、簡(jiǎn)易性:超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式,從而更加靈活方便,適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性:超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能,增加標(biāo)識(shí)符等要求,超級(jí)文本標(biāo)記語(yǔ)言采取子類(lèi)元素的方式,為系統(tǒng)擴(kuò)展帶來(lái)保證。 3、平臺(tái)無(wú)關(guān)性:超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用,這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性:HTML是網(wǎng)絡(luò)的通用語(yǔ)言,它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面,這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到,無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。
方法:1、使用“text-align:justify”語(yǔ)句設(shè)文本兩端對(duì)齊;2、使用flex布局的justify-content屬性設(shè)文本兩端對(duì)齊,語(yǔ)法“justify-content:space-around|space-between”。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
兩端對(duì)齊,從概念上來(lái)說(shuō),其實(shí)不難理解。如果不明白什么叫兩端對(duì)齊,可以玩玩word等辦公軟件。
下面談?wù)勅绾螌?shí)現(xiàn)文本的兩端對(duì)齊。我所知道的大概有以下幾種方法
text-align用于設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。如果想使inline元素或inline-block元素居中對(duì)齊,可以使用text-align: center方法,對(duì)于block元素?zé)o法使用text-align實(shí)現(xiàn)居中對(duì)齊。如果想讓block元素居中對(duì)齊,可以使用margin: auto方法。
text-align屬性下有一個(gè)justify值可以設(shè)置元素的兩端對(duì)齊。但是text-align: justify屬性有一些不足之處:
在單行文本下,無(wú)法實(shí)現(xiàn)兩端對(duì)齊效果。
在多行文本下,無(wú)法實(shí)現(xiàn)最后一行文本的兩端對(duì)齊效果。
單行文本
<p class="keith">unclekeith wanna be a geek!</p> .keith { background-color: lightblue; }
對(duì)于多行文本而言,如下圖,按照我們的理解應(yīng)該如右圖顯示,可是在設(shè)置text-align: justify之后,會(huì)按照左圖顯示。無(wú)法是西安最后一行文本的兩端對(duì)齊效果。
如果要真正的實(shí)現(xiàn)兩端對(duì)齊效果,可以用以下方法解決。
//解決方法的思路:由于在單行文本下和多行文本下最后一樣無(wú)法實(shí)現(xiàn)兩端對(duì)齊效果,因此給元素新增一行,即可實(shí)現(xiàn)justify的兩個(gè)不足之處。 .keith { text-align: justify; } .keith:after { display: inline-block; width: 100%; content: ''; }
如果感覺(jué)最后多了空行,可以為元素設(shè)置一個(gè)高度,并且設(shè)置overflow: hidden隱藏掉即可。
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)目在伸縮容器的右邊緣。
justify-content: space-around;
justify-content: space-between
以上是“html如何讓段落文本兩端對(duì)齊”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。