Bagaimana untuk Memusatkan Logo Jenama dengan Sempurna dalam Navbar Bootstrap 3?

Memusatkan Logo Jenama dalam Bootstrap Navbar

Anda sedang cuba mencipta navbar Bootstrap 3 dengan logo jenama sejajar tengah yang berterusan. Pendekatan semasa anda menggunakan gaya kelas "jenama" sebahagiannya menjajarkan logo tetapi mengganggu reka letak elemen bar navigasi lain.

Untuk menyelesaikannya, pertimbangkan strategi alternatif:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

CSS ini:

1. Menetapkan .navbar kepada kedudukan: relatif untuk membenarkan kedudukan mutlaknya kanak-kanak.
2. Letakkan .jenama secara mutlak dan tengahkannya di sebelah kiri: 50%;.
3. Tetapkan margin-kiri kepada -50px (laraskan mengikut separuh daripada lebar logo anda) untuk mengatasi bahagian tengah letakkan dan halang logo daripada bergerak di luar tengah apabila mengezum.

Pendekatan ini membetulkan masalah dan menyediakan pemusatan logo yang tepat tanpa mengganggu elemen navbar lain. Anda boleh merujuk kepada Fiddle yang dikemas kini untuk contoh yang berkesan.

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