CSS金額顯示中間橫的方法

在CSS中，我們可以使用text-align屬性來(lái)設(shè)置文本的對(duì)齊方式，center”值可以將文本居中顯示，而對(duì)于金額顯示中間橫的需求，我們可以利用這個(gè)屬性來(lái)實(shí)現(xiàn)。

我們需要?jiǎng)?chuàng)建一個(gè)包含金額的HTML元素，例如一個(gè)段落（p）或者一個(gè)列表項(xiàng)（li），在這個(gè)元素中添加一個(gè)span或者b標(biāo)簽來(lái)包裹金額數(shù)字。

在CSS中設(shè)置這個(gè)元素的text-align屬性為“center”，這樣金額數(shù)字就會(huì)居中顯示，我們還可以使用border-top屬性來(lái)添加一條橫線，以分隔金額和其他內(nèi)容。

以下是一個(gè)示例代碼：

HTML代碼：

<p class="amount">
  <span class="amount-value">$1234.56</span>
  <b class="amount-line"></b>
</p>

CSS代碼：

.amount {
  text-align: center;
  border-top: 1px solid #000;
}
.amount-value {
  vertical-align: middle;
}
.amount-line {
  vertical-align: middle;
  height: 1px;
  width: 100%;
  display: block;
}

在這個(gè)示例中，金額數(shù)字“$1234.56”被居中顯示，并且上方有一條橫線，通過(guò)調(diào)整border-top屬性的值，我們可以改變橫線的樣式和顏色，通過(guò)調(diào)整vertical-align屬性的值，我們可以讓金額數(shù)字和橫線垂直居中顯示。