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