CSS橫杠背景居中顯示的方法

在CSS中，我們可以使用text-align屬性來將文本居中顯示，如果我們想要在文本下方添加一條橫杠背景，并且讓這條橫杠背景也居中顯示，那么就需要一些額外的技巧了。

我們需要創(chuàng)建一個包含文本和橫杠背景的容器，這個容器可以使用div元素來創(chuàng)建，并且給它一個寬度和高度。

<div class="container">
  <p>這是一段文本</p>
  <div class="bar"></div>
</div>

我們可以使用CSS來設(shè)置容器的樣式，讓文本和橫杠背景都居中顯示，我們可以使用flexbox布局來實(shí)現(xiàn)。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 200px;
  border: 1px solid #000;
}
.bar {
  height: 2px;
  width: 100%;
  background-color: #000;
}

在上面的代碼中，我們首先將容器設(shè)置為flex布局，然后使用justify-content和align-items屬性來讓文本和橫杠背景都居中顯示，我們給容器設(shè)置了一個高度和寬度，并且添加了一個邊框，我們給橫杠背景設(shè)置了一個高度、寬度和背景顏色。

當(dāng)我們運(yùn)行這段代碼時，就會看到一條居中的橫杠背景，并且文本也會居中顯示在橫杠背景的下方。