Bagaimana untuk Memusatkan Logo Jenama dalam Navbar Bootstrap 3?

Memastikan Logo Jenama Dipusatkan dalam Bootstrap Navbar

Anda boleh mencapai logo jenama berpusat dalam Bootstrap 3 navbar menggunakan strategi kedudukan tersuai. Walaupun kod yang disediakan menawarkan reka bentuk yang baik, ia mengganggu penjajaran elemen navbar yang lain.

<a class="brand"></a>

Untuk membetulkannya, pertimbangkan CSS berikut:

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

Pendekatan ini:

• Letakkan bekas navbar sebagai relatif.
• Menetapkan logo jenama kepada mutlak kedudukan.
• Memusatkan logo secara mendatar dengan menetapkan kiri: 50% dan mengimbangi dengan separuh lebar logo (margin-kiri: -50px).
• Laraskan margin-kiri dengan !important untuk mengatasi Bootstrap's tetapan lalai.

Ini memastikan logo kekal di tengah walaupun semasa mengezum.

Rebab: [https://fiddle](pautan)

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