まず、他の投稿を試みたことを伝える必要がありますが、残念ながらどれもうまくいきません。ナビゲーションバーがあり、ナビゲーションバーの中央で「HOME」ボタンを開始したいと思っています。基本的に4つのボタンが中央に配置されています。 ありがとうございます。ここではすべてのHTMLとCSS:jsfiddle.net/bqcuu3dk/CSSのナビゲーションバーのセンタリング
-1
A
答えて
0
は、中心にあなたのナビゲーションバーにheight
とline-height
を追加し、text-align
。
#navbar {
height: 43px;
line-height: 43px;
overflow: hidden;
text-align: center;
background-color: #333;
}
#navbar a {
color: #f2f2f2;
padding: 14px 16px;
font: normal 15px Verdana, sans-serif;
text-decoration: none;
transition: all 0.8s ease 0s;
}
#navbar a:hover {
background-color: #595959;
color: #d1d1d1;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
#navbar a.active:hover {
background-color: #4CAF50;
color: white;
opacity: 0.65;
}
<div id="navbar">
<a class="active" href="#index">Home</a>
<a href="#nav1">Nav1</a>
<a href="#nav2">Nav2</a>
<a href="#nav3">Nav3</a>
</div>
0
使用この更新CSS:
#navbar {
overflow: hidden;
text-align:center;
background-color: #333;
}
#navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
font: normal 15px Verdana, sans-serif;
text-decoration: none;
transition: all 0.8s ease 0s;
}
#navbar a:hover {
background-color: #595959;
color: #d1d1d1;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
#navbar a.active:hover {
background-color: #4CAF50;
color: white;
opacity: 0.65;
}
+0
ねえ、あなたは、ディスプレイを追加する必要がありますインラインブロック;パディングスタイルを維持します。 – YouDeserveThat
関連する問題
- 1. CSSのウェブページの幅、ナビゲーションバーのセンタリングとウィジェットのラップセンタリング
- 2. CSSブロックのセンタリング
- 3. CSSフローティングのセンタリング
- 4. ナビゲーションバーのタイトルラベル付きイメージのセンタリング
- 5. CSSのセンタリング問題
- 6. CSSセンタリングの問題
- 7. ナビゲーションメニューのCSSセンタリングの問題
- 8. のCss翻訳センタリング要素
- 9. CSSホットスポットとセンタリングの問題
- 10. CSS縦書きテキストのセンタリング
- 11. CSSのセンタリングが表示ブロック
- 12. CSSコンテナdivをセンタリング
- 13. HTML&CSSセンターのナビゲーションバー
- 14. ホバー上のナビゲーションバー - CSS
- 15. ナビゲーションバーHTML&CSS
- 16. HTMLとCSSのナビゲーションバーのエラー
- 17. CSSの背景イメージのナビゲーションバー
- 18. cssのli内のdivのセンタリング
- 19. Css自動センタリング問題
- 20. CSSの背景画像のセンタリング
- 21. これらのボタンをナビゲーションバーに垂直にセンタリングするには
- 22. CSS/HTMLナビゲーションバーの問題
- 23. CSSアクティブなスライドドアのナビゲーションバー
- 24. モバイルビュー(CSS)でコンテンツと画像のセンタリング
- 25. トランスフォームを使用したCSSのセンタリング
- 26. CSSのマージンがセンタリングされない
- 27. CSS内の回転したテキストのCSSセンタリング
- 28. CSSの水平方向のナビゲーションバー
- 29. CSSナビゲーションバーのホバー - 背景の変更
- 30. Tumblrの水平ナビゲーションバーの問題(CSS/HTML)
素晴らしい、ありがとう:) – Arbys
フレックスボックスを使用することもできます。 –