在CSS中,讓hr標簽居中需要使用以下幾種方法:
方法一: hr { display: block; margin: 0 auto; border-style: solid; border-width: 1px 0 0 0; } 方法二: hr { width: 50%; margin: 0 auto; border-style: solid; border-width: 1px 0 0 0; } 方法三: hr { position: relative; border-style: solid; border-width: 1px 0 0 0; } hr::before { content: ""; position: absolute; top: 50%; width: 100%; height: 1px; background-color: black; }
在以上代碼中,方法一和方法二都是利用margin:auto實現水平居中的,不同的是方法一設置了hr標簽為塊級元素,方法二設置了寬度,兩種方式都可以實現hr標簽的水平居中。
方法三則是利用偽元素:before來實現hr標簽的水平居中,通過將hr標簽設為relative定位,再將:before偽元素設為絕對定位,并將top屬性設為50%,讓偽元素的中心位置與hr標簽的中心重合,最后設置偽元素的寬度為100%,高度為1px,從而實現hr標簽的水平居中。