如何在 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中文網其他相關文章！