Bagaimanakah saya boleh memusatkan tajuk dengan garis mendatar di kedua-dua belah menggunakan CSS?

CSS: Tajuk Berpusat dengan Garis Mendatar di Mana-mana Sisi

Cabaran ini melibatkan mencipta tajuk halaman (tajuk) yang berpusat dengan garisan mendatar secara menegak berpusat pada kedua-dua belah, sambil mengekalkan ketelusan untuk imej latar belakang.

Untuk menangani perkara ini, pertimbangkan penyelesaian berikut:

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

Dalam kod ini:

• Elemen h1 diletakkan secara relatif dan berpusat mendatar.
• Dua unsur pseudo (:sebelum dan :selepas) digunakan untuk mencipta garisan mendatar pada kedua-dua belah.
• Garisan diletakkan secara mutlak , tetapkan kepada 51% dari atas dan separuh lebar tajuk.
• Untuk mencipta kawasan lutsinar di sekeliling teks, sifat limpahan elemen h1 ditetapkan kepada tersembunyi.
• Untuk memastikan garisan disembunyikan apabila bertindih dengan teks, garisan tersebut diberikan ruang tidak putus (a0) sebagai kandungannya.
• Warna latar belakang merah menjadikan garisan mudah dilihat untuk tujuan demonstrasi. Laraskannya agar sepadan dengan penggayaan yang anda inginkan.

Penyelesaian ini berkesan memusatkan tajuk dan mencipta garisan mendatar yang diingini tanpa memperkenalkan sebarang elemen HTML tambahan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memusatkan tajuk dengan garis mendatar di kedua-dua belah menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!