如何使用站點特定的CSS將Navbar和徽標居中

Question

我一直在努力弄清楚這個問題。它似乎是使用CSS的快速修復，但我似乎無法找到適當的CSS規則來進行更改。我想中央的導航欄，以及本網站http://breespecific.co.nf

Answer 1

簡短的回答標題圖片是，你有兩個主要選擇：

1. 定義width或項目的max-width是居中，並添加margin: auto;

2. 給這個項目爲中心display:inline-block;和它的父容器text-align:center;

在這兩種情況下，您嘗試居中的項目都不應該有浮動標記，並且它們將相對於父項的寬度顯示居中。

在您的特定頁面，.navbar-header {text-align:center;float:none;}和#logo {display:inline-block;}應該照顧的標識，並#main-menu '{display: inline-block; float: none;}和.navbar-ex1-collapse {text-align:center;}要做到你想要什麼（不要忘記帶浮出了這些媒體的查詢，以及）。

如果您想在響應式頁面中使用其他方法，最可能需要設置max-width百分比，然後margin:auto;。

Answer 2

從.navbar-header取出花車和.main-nav添加text-align:center標題將居中，但導航需要另一個規則，請從.main-menu li的float:left，並使其display:inline-block現在text-align:center將生效，因此淨資產值將過於集中。

由於您還沒有提供小提琴，我無法發佈代碼示例，但實現起來很簡單。