你是否曾經想過在文本中央添加一條線?這種效果可以使用CSS很容易實現。下面是一個實現這種效果的樣板代碼:
/* 創建一條線的樣式 */ .center-line { border-top: 1px solid black; width: 100%; position: absolute; top: 50%; left: 0; margin-top: -0.5px; } /* 將該樣式應用于包含文本的元素 */ .text-container { position: relative; }
這里我們首先創建了一個類名為 .center-line 的樣式。該樣式使用 border-top 屬性創建一個上邊框,然后使用 position 屬性使其絕對定位于包含該元素的 .text-container 元素的中心。我們還使用了 margin-top 屬性來微調線的位置。
在這之后,我們將樣式應用于包含文本的元素,這里我們使用了一個類名為 .text-container 的 div 元素。這個 div 元素用于包含需要加入一條線的文本元素。我們使用了 position: relative 屬性對其進行相對定位,這樣我們的 .center-line 樣式就可以基于它的中心來定位。
這就是如何在文本中央添加一條線的方法。你可以按照自己的需求對 .center-line 的樣式進行微調,比如改變線的樣式、顏色、粗細等。希望這篇文章對你有用!
上一篇css文本上移代碼