方法:1、在文字元素中加入具有「display:inline-block;width:100%」樣式的i標籤;2、利用「text-indent」屬性讓插入i標籤的文字元素兩端對齊,語法為「文字元素{text-align:justify}」。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
css怎麼設定文字格式兩端對齊
#在css中,可以將text-indent屬性設定為justify,實作文字兩端對齊。以下舉例講解css如何讓文字兩端對齊。
1、新建一個html文件,命名為test.html,用來講解css如何讓文字兩端對齊。使用div標籤建立一行文字,用於測試。
在css標籤內,透過div元素名稱設定div的樣式,定義div的寬度為500px,背景顏色為黃色,同時將text-align屬性設定為justify。
2、以上的樣式設定並不會實現兩端對齊,還需要定義一個空標籤來輔助實作。在div內,再使用一個i標籤輔助實現兩端對齊。
在css標籤內,再設定i標籤的樣式,定義其display屬性,同時設定i標籤的寬度為百分一百
在瀏覽器開啟test.html文件,查看實現的效果。
總結:
1、使用div標籤建立一行文字。
2、在div內,再定義一個空標籤,例如 ,i標籤。
3、在css中,使用text-align屬性設定為justify,同時設定i標籤的寬度為100%。
注意事項
除了使用i標籤外,還可以使用span標籤等。
(學習影片分享:css影片教學)
以上是css如何設定文字格式兩端對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章!