html怎麼讓段落文字兩端對齊

方法：1、使用「text-align:justify」語句設文字兩端對齊；2、使用flex版面的justify-content屬性設文字兩端對齊，語法「justify-content:space-around |space-between」。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS實現兩端對齊效果

兩端對齊，從概念上來說，其實不難理解。如果不明白什麼叫兩端對齊，可以玩玩word等辦公室軟體。

下面談談如何實現文字的兩端對齊。我所知道的大概有以下幾種方法

text-align

text-align用來設定區塊級元素內文字的水平對齊方式。如果想要讓inline元素或inline-block元素居中對齊，可以使用text-align: center方法，對於block元素無法使用text-align實現居中對齊。如果想要讓block元素居中對齊，可以使用margin: auto方法。

text-align屬性下有一個justify值可以設定元素的兩端對齊。但是text-align: justify屬性有一些不足之處：

1. 在單行文字下，無法實現兩端對齊效果。

2. 在多行文字下，無法實現最後一行文字的兩端對齊效果。

單行文字

<p class="keith">unclekeith wanna be a geek!</p>
.keith {
    background-color: lightblue;
    
}

對於多行文字而言，如下圖，按照我們的理解應該如右圖顯示，可是在設定text-align : justify之後，會依照左圖顯示。無法是西安最後一行文字的兩端對齊效果。

解決方法

如果要真正的實作兩端對齊效果，可以用以下方法解決。

//解决方法的思路：由于在单行文本下和多行文本下最后一样无法实现两端对齐效果，因此给元素新增一行，即可实现justify的两个不足之处。
.keith {
    text-align: justify;
}
.keith:after {
    display: inline-block;
    width: 100%;
    content: '';
}

如果感覺最後多了空行，可以為元素設定一個高度，並且設定overflow: hidden隱藏掉即可。

justify-content

CSS3新增的flex佈局下，有一個justify-content屬性，此屬性可以控制伸縮項目的水平對齊方式。其中有兩個值，可以實現兩端對齊。但justify-content有相容性問題，IE10以上，FF，Chrome都支援。而所有瀏覽器都支援text-align屬性

justify-content: space-around; //伸缩项目会平均地分布在伸缩容器内，两端保留一半的空间。
justify-content: space-between; //伸缩项目会平均地分布在伸缩容器内，第一个伸缩项目在伸缩容器的左边缘，最后一个伸缩项目在伸缩容器的右边缘。

justify-content: space-around;

justify-content: space-between

推薦學習：html影片教學

以上是html怎麼讓段落文字兩端對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！