溫馨提示×

css兩端對齊方式怎么設置

小億
176
2023-06-07 19:44:32
欄目: 編程語言

CSS中實現(xiàn)兩端對齊方式可以使用以下兩種方式:

  1. 使用text-align:justify屬性實現(xiàn)兩端對齊方式。

將需要對齊的元素包裹在一個父元素中,然后給父元素設置text-align:justify屬性,這樣子元素就會自動兩端對齊。

示例代碼:

<div class="parent">
<p>這是一段需要兩端對齊的文本</p>
<p>這是另一段需要兩端對齊的文本</p>
<p>這是最后一段需要兩端對齊的文本</p>
</div>
<style>
.parent {
text-align: justify;
}
.parent::after {
content: "";
display: inline-block;
width: 100%;
}
</style>
  1. 使用flexbox布局實現(xiàn)兩端對齊方式。

將需要對齊的元素包裹在一個父元素中,然后給父元素設置display:flex屬性,再設置justify-content:space-between屬性,這樣子元素就會自動兩端對齊。

示例代碼:

<div class="parent">
<p>這是一段需要兩端對齊的文本</p>
<p>這是另一段需要兩端對齊的文本</p>
<p>這是最后一段需要兩端對齊的文本</p>
</div>
<style>
.parent {
display: flex;
justify-content: space-between;
}
</style>

0