首页 话题 小组 问答 好文 用户 我的社区 域名交易

[分享]css中如何让hr左右居中

发布于 2024-11-11 19:24:40
0
10

在CSS中,hr标签是用于创建水平线的,但默认的hr标签是居左对齐的。如果需要让hr标签左右居中,可以通过以下几种方法实现。1. 将hr标签包裹在一个div中,并设置该div的textalign属性为...

在CSS中,hr标签是用于创建水平线的,但默认的hr标签是居左对齐的。如果需要让hr标签左右居中,可以通过以下几种方法实现。
1. 将hr标签包裹在一个div中,并设置该div的text-align属性为center。

<div style="text-align: center">
    <hr>
</div> 

2. 将hr标签设置为display:inline-block,并将其父元素设置text-align属性为center。
<p style="text-align: center">
    <hr style="display: inline-block">
</p> 

3. 使用flex布局,将hr标签包裹在一个div中,并设置该div的display属性为flex,justify-content属性为center。
<div style="display: flex; justify-content: center">
    <hr>
</div> 

以上三种方法都可以使hr标签左右居中,具体使用要根据实际情况选择。
评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流