如何将品牌徽标置于 Bootstrap 3 导航栏中的中心？

将品牌徽标保持在 Bootstrap 导航栏中居中

您可以使用自定义的定位策略在 Bootstrap 3 导航栏中实现居中的品牌徽标。虽然提供的代码提供了不错的设计，但它扰乱了其他导航栏元素的对齐。

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

要解决此问题，请考虑以下 CSS：

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

此方法：

• 将导航栏容器定位为相对位置。
• 将品牌徽标设置为绝对位置。
• 通过设置 left: 50% 并偏移徽标宽度的一半（margin-left: -50px）使徽标水平居中。
• 使用 !important 调整 margin-left覆盖 Bootstrap 的默认设置。

这可以确保徽标即使在缩放。

小提琴： [https://fiddle](link)

以上是如何将品牌徽标置于 Bootstrap 3 导航栏中的中心？的详细内容。更多信息请关注PHP中文网其他相关文章！