Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Logo Jenama Bootstrap Navbar?

Bagaimana untuk Memusatkan Logo Jenama Bootstrap Navbar?

Linda Hamilton
Linda Hamiltonasal
2024-12-02 07:56:10727semak imbas

How to Center a Bootstrap Navbar Brand Logo?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn