Bagaimana untuk Memusatkan Logo Jenama Bootstrap Navbar?

Memusatkan Logo Jenama Bootstrap Navbar

Apabila menyesuaikan navbar Bootstrap, peletakan logo jenama sering menjadi kebimbangan. Secara lalai, logo mungkin tidak berpusat. Berikut ialah langkah-langkah untuk mencapai pemusatan yang sempurna:

1. Buat Bekas untuk Kedudukan Mutlak:

   • Balutkan bar navigasi dalam div dengan kelas "navbar" dan tetapkan kedudukannya kepada "relatif."

2. Tambahkan Kedudukan Mutlak pada Jenama:

   • Tetapkan kedudukan logo jenama (kelas "jenama") kepada "mutlak," dan harta kirinya kepada 50%.

3. Pelarasan Margin:

   • Tambah sifat kiri margin negatif pada jenama, bersamaan dengan 50 % daripada lebar logo. Ini memastikan bahawa logo kekal di tengah semasa saiz semula halaman.

4. Paparan Blok Sebaris:

   • Tetapkan sifat paparan jenama untuk "sekat" untuk menjadikannya sejajar dengan bar navigasi yang lain elemen.

Berikut ialah CSS yang disemak:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;
    display: block;
}

Pendekatan ini secara berkesan meletakkan logo jenama di tengah sambil mengekalkan integriti reka letak navbar.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Logo Jenama Bootstrap Navbar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!