web-dev-qa-db-ja.com

CSSまたはHTMLでナビゲーションバーを中央に配置する方法は？

ナビゲーションバーを このページ の中央に配置するのが困難です。

私は試した nav { margin: 0 auto; }および他の多くの方法が、私はまだそれを中央に置くことができません。

htmlcssnavcentering
10
tokyowp
#nav ul {
    display: inline-block;
    list-style-type: none;
}

動作するはずです。あなたのサイトでテストしました。

enter image description here

21
morgar

CSSを追加します。

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}
10
Niclas Sahlin

ナビゲーションがある場合<ul>をクラス#navで使用する場合は、<ul> divコンテナ内のアイテム。 divコンテナーを100％幅にします。 text-align：要素をdivコンテナの中央に設定します。次に、<ul>そのクラスを3つの特定の要素を持つように設定します：text-align：center;位置：相対;表示：インラインブロック。

それが中心になります。

2
Brandon

それを修正する最良の方法は、ナビゲーションメニューを中央に配置するコードまたはトリックを探し、それがすべてのブラウザと友人のために機能する実際のソリューションを見つけました;）

ここに私がやった方法があります：

body {
    margin: 0;
    padding: 0;
}

div maincontainer {
    margin: 0 auto;
    width: ___px;
    text-align: center;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin-left: auto;
    margin-right: auto;
}

doctype html5を設定することを忘れないでください

0
polas

次のように、フロートとインラインブロックを使用してナビゲーションを中央に配置することもできます。

nav li {
   float: left;
}
nav {
   display: inline-block;
}
0
camara

navdivは実際には正しく中央揃えされています。しかし、内部のulはそうではありません。 ulにも特定の幅と中心を指定します。

0
AlbertVo