2016-11-13 2 views
-1

私はすでにstackoverflow(margin:0 auto;text-align、...)で多くのソリューションを試していますが、どれもまだ動作していません。
ナビゲーションバーの中央にナビゲーションメニュー(div)を配置しようとしていますが、今まではこれを行うことができませんでした。私は正常にmargin-left:20%でそれをやったが、これは、私がウィンドウを最小限に抑え、ボタンが他のものの下に落ちて全体のWebページを破壊するときに起こったものです。今DIVを別のDIVの中にセンタリングする

body{ 
 
\t margin:0; 
 
} 
 

 
header{ 
 
\t height:2.5vw; 
 
\t width:100%; 
 
\t background-color:#2f2f2f; 
 
\t box-shadow: 0px 5px 5px #111111; /* #888888 */ 
 
} 
 
nav{ 
 
\t /* margin-left:20%; 
 
\t margin-right:20%; */ 
 
} 
 
li{ 
 
\t display:flex; 
 
\t height:2.5vw; 
 
\t width:20%; /* 33.2% 19.9vw */ 
 
\t float:left; 
 
\t border-left-color:#000000; 
 
\t border-left-style:solid; 
 
\t border-left-width:thin; 
 
\t border-right-color:#000000; 
 
\t border-right-style:solid; 
 
\t border-right-width:thin; 
 
\t text-align:center; 
 
\t justify-content: center; 
 
\t flex-direction:column; 
 
\t color:#5F5F5F; 
 
\t font-size:1vw; 
 
} 
 
li:hover{ 
 
\t background-color:#505050; 
 
} 
 
li:first-child{ 
 
\t border-right:none; 
 
} 
 
li:last-child{ 
 
\t border-left:none; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 
<body> 
 
<header><nav><li class=but>Home</li><li class=but>Projects</li><li class=but>Contact</li></nav></header> 
 
</body> 
 
</html>

+0

リンク:-http://stackoverflow.com/questions/15376634/how-can-i-center-a-div-within -another-div –

答えて

0

CSS Flexboxを使用できます。このことができます

nav { 
    display: flex; 
    justify-content: center; 
} 

body{ 
 
\t margin:0; 
 
} 
 

 
header{ 
 
\t height:2.5vw; 
 
\t width:100%; 
 
\t background-color:#2f2f2f; 
 
\t box-shadow: 0px 5px 5px #111111; /* #888888 */ 
 
} 
 
nav{ 
 
\t display: flex; 
 
    justify-content: center; 
 
} 
 
li{ 
 
\t display:flex; 
 
\t height:2.5vw; 
 
\t width:20%; /* 33.2% 19.9vw */ 
 
\t float:left; 
 
\t border-left-color:#000000; 
 
\t border-left-style:solid; 
 
\t border-left-width:thin; 
 
\t border-right-color:#000000; 
 
\t border-right-style:solid; 
 
\t border-right-width:thin; 
 
\t text-align:center; 
 
\t justify-content: center; 
 
\t flex-direction:column; 
 
\t color:#5F5F5F; 
 
\t font-size:1vw; 
 
} 
 
li:hover{ 
 
\t background-color:#505050; 
 
} 
 
li:first-child{ 
 
\t border-right:none; 
 
} 
 
li:last-child{ 
 
\t border-left:none; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 
<body> 
 
<header><nav><li class=but>Home</li><li class=but>Projects</li><li class=but>Contact</li></nav></header> 
 
</body> 
 
</html>

希望:

は次のようにあなたの<nav>フレキシボックスを作ろう!

+0

ありがとう!あなたのソリューションは機能しました!あなたはロック! – DownbeatTax

+0

@DownbeatTax私の喜び! –

1

すべてのブロックレベル要素はデフォルトでそうであるように、あなたのnav要素は、100%の幅を有しています。だから、それを中心に辺を押し上げる余地はありません。

だから、widthにする必要があります。次に、中央に配置するには、margin-left:auto; margin-right:auto;

幅を50%とすると、マージンルームが拡大してビューポートの両側に押し上げられます。

+0

説明してくれてありがとう、負荷を意味する視覚的表現を説明してくれます。ありがとう! – DownbeatTax

0

だけ余裕を持って、それを中央に、それにwidthを与える:自動

nav{ 
    width:1000px; 
    margin:auto; 
} 
+0

私はレスポンシブウェブで作業しようとしています。これはピクセルをほとんど使用しないことを意味します。なぜなら、実際に解像度が異なるデバイスに依存するからです。あなたのソリューションに感謝します! – DownbeatTax

+0

@DownbeatTax%で変更**%** ** –

関連する問題