如何將品牌標誌置於 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中文網其他相關文章！