css两端对齐方式怎么设置

507
2023/6/30 19:44:32
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

CSS中实现两端对齐方式可以使用以下两种方式:

  1. 使用text-align:justify属性实现两端对齐方式。

将需要对齐的元素包裹在一个父元素中,然后给父元素设置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布局实现两端对齐方式。

将需要对齐的元素包裹在一个父元素中,然后给父元素设置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>

辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: css渐变动画效果怎么实现