首頁  >  文章  >  web前端  >  以下是一些適合您提供的文本的基於問題的文章標題: * 如何建立居中標題,兩側有水平線(無背景)? * 想要為你添加水平線

以下是一些適合您提供的文本的基於問題的文章標題: * 如何建立居中標題,兩側有水平線(無背景)? * 想要為你添加水平線

Linda Hamilton
Linda Hamilton原創
2024-10-26 11:25:02800瀏覽

Here are a few question-based article titles that fit your provided text:

* How to Create a Centered Heading with Horizontal Lines on Both Sides (No Background)?
* Want to Add Horizontal Lines to Your Heading Without Background? Here's How.
* CSS Trick:

如何建立兩側有水平線且沒有背景的標題

在這種情況下,您需要使用以下命令建立居中的頁面標題兩邊有水平線,沒有任何背景顏色。

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;
}

/*Optional for background color*/
.color {
    background-color: #ccc;
}

說明:

    h1 使用相對定位和居中。
  • 使用 :before 和 :after 建立元素之前和之後,並絕對定位在 51% 頂部以垂直居中它們。
  • 帶有「a0」(不間斷空格)的內容屬性使線條在文字所在的位置消失。
  • 溢出:隱藏確保線條不會與文字重疊。
  • 您可以選擇如果需要,可以使用 .color 類別新增背景顏色。

注意:此解可以處理不同長度的標題,而無需手動調整行位置。

以上是以下是一些適合您提供的文本的基於問題的文章標題: * 如何建立居中標題,兩側有水平線(無背景)? * 想要為你添加水平線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn