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