How to Center a Brand Logo in a Bootstrap 3 Navbar?

Keeping Brand Logo Centered in Bootstrap Navbar

You can achieve a centered brand logo in Bootstrap 3 navbar using a customized positioning strategy. While the provided code offers a decent design, it disturbs the alignment of other navbar elements.

<a class="brand">

To fix this, consider the following CSS:

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

This approach:

• Positions the navbar container as relative.
• Sets the brand logo to an absolute position.
• Centers the logo horizontally by setting left: 50% and offsetting with half the logo width (margin-left: -50px).
• Adjusts margin-left with !important to override Bootstrap's default settings.

This ensures the logo remains centered even during zooming.

Fiddle: [https://fiddle](link)

The above is the detailed content of How to Center a Brand Logo in a Bootstrap 3 Navbar?. For more information, please follow other related articles on the PHP Chinese website!