如何使用 CSS 將標題與兩側的水平線置中？

CSS：兩側水平線居中的標題

此挑戰涉及創建以水平線垂直居中的頁面標題（標題）兩側居中，同時保持背景影像的透明度。

要解決此問題，請考慮以下解決方案：

<code class="css">h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}</code>

在此程式碼中：

• h1 元素相對定位且水平居中。
• 兩個偽元素（:before 和 :after）用於建立兩側的水平線。
• 線條絕對定位，設定為距頂部的 51%，標題寬度的一半。
• 要在文字周圍建立透明區域，h1 元素的溢出屬性設定為隱藏。
• 為了確保線條在與文字重疊時隱藏，它們被賦予不間斷空格 (a0) 作為其內容。
• 紅色背景顏色使線條易於可見以用於演示目的。調整它以符合您想要的樣式。

此解決方案有效地將標題居中並建立所需的水平線，而無需引入任何其他 HTML 元素。

以上是如何使用 CSS 將標題與兩側的水平線置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！