如何在 Bootstrap 3 导航栏中完美居中品牌徽标？

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

您正在尝试创建一个带有持久中心对齐品牌徽标的 Bootstrap 3 导航栏。您当前使用“品牌”类样式的方法会部分对齐徽标，但会破坏其他导航栏元素的布局。

要解决此问题，请考虑替代策略：

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

此 CSS：

1. 将 .navbar 设置为位置：相对以允许其绝对定位
2. 绝对定位 .brand 并将其居中于左侧：50%;.
3. 将左边距设置为 -50px（根据徽标宽度的一半进行调整）以抵消居中定位并防止缩放时徽标偏离中心。

此方法纠正了问题并提供精确的徽标居中而不干扰其他导航栏元素。您可以参考更新的 Fiddle 来获取工作示例。

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