方法:1、在文本元素中添加具有“display:inline-block;width:100%”樣式的i標(biāo)簽;2、利用“text-indent”屬性讓插入i標(biāo)簽的文本元素兩端對(duì)齊,語(yǔ)法為“文本元素{text-align:justify}”。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css怎樣設(shè)置文本格式兩端對(duì)齊
在css中,可以將text-indent屬性設(shè)置為justify,實(shí)現(xiàn)文字兩端對(duì)齊。下面舉例講解css如何讓文字兩端對(duì)齊。
1、新建一個(gè)html文件,命名為test.html,用于講解css如何讓文字兩端對(duì)齊。使用div標(biāo)簽創(chuàng)建一行文字,用于測(cè)試。
在css標(biāo)簽內(nèi),通過(guò)div元素名稱設(shè)置div的樣式,定義div的寬度為500px,背景顏色為黃色,同時(shí)將text-align屬性設(shè)置為justify。
2、以上的樣式設(shè)置并不會(huì)實(shí)現(xiàn)兩端對(duì)齊,還需要定義一個(gè)空標(biāo)簽來(lái)輔助實(shí)現(xiàn)。在div內(nèi),再使用一個(gè)i標(biāo)簽輔助實(shí)現(xiàn)兩端對(duì)齊。
在css標(biāo)簽內(nèi),再設(shè)置i標(biāo)簽的樣式,定義其display屬性,同時(shí)設(shè)置i標(biāo)簽的寬度為百分一百
在瀏覽器打開(kāi)test.html文件,查看實(shí)現(xiàn)的效果。
總結(jié):
1、使用div標(biāo)簽創(chuàng)建一行文字。
2、在div內(nèi),再定義一個(gè)空標(biāo)簽,例如 ,i標(biāo)簽。
3、在css中,使用text-align屬性設(shè)置為justify,同時(shí)設(shè)置i標(biāo)簽的寬度為100%。
注意事項(xiàng)
除了使用i標(biāo)簽外,還可以使用span標(biāo)簽等。
(學(xué)習(xí)視頻分享:css視頻教程)