Bagaimana untuk Memusatkan Logo Jenama dengan Sempurna dalam Navbar Bootstrap?

Cara Memusatkan Logo Jenama dalam Navbar Bootstrap

Untuk persembahan bar nav yang optimum, mengekalkan logo jenama di tengah adalah penting. Artikel ini akan membimbing anda melalui langkah yang diperlukan untuk mencapai penjajaran estetik ini.

Dalam kod yang diberikan, anda telah memasukkan penanda bar nav Bootstrap standard dengan kelas "jenama". Walau bagaimanapun, menambah gaya pada kelas ini tidak menyelesaikan masalah anda sepenuhnya. Ia meletakkan logo di tengah tetapi menggantikan elemen navbar lain.

Untuk menyelesaikan isu ini, pakai pendekatan berikut:

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

Kod yang dipertingkatkan ini meletakkan semula logo menggunakan kedudukan mutlak dan mengimbanginya dengan peraturan "kiri: 50%". Sifat "margin-left" mengimbangi separuh lebar logo, memastikan pemusatan yang tepat.

Dengan menerima pendekatan yang disemak ini, anda boleh memusatkan logo jenama anda dengan berkesan dalam bar navigasi sambil mengekalkan integriti elemen lain.

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