Centering DIV inside another DIV

Question

I already tried many of solutions on stackoverflow (margin:0 auto; text-align, ...) and none of them yet worked.
I'm trying to center navigation menu (div) on the middle of navigation bar, but till now I've been unable to do that. I successfully did it with margin-left:20% but what this caused is when I minimized window, button fell beneath others and destroys whole webpage.

body{
 margin:0;
}

header{
 height:2.5vw;
 width:100%;
 background-color:#2f2f2f;
 box-shadow: 0px 5px 5px #111111;  /* #888888 */
}
nav{
 /* margin-left:20%;
 margin-right:20%; */
}
li{
 display:flex;
 height:2.5vw;
 width:20%; /* 33.2% 19.9vw */
 float:left;
 border-left-color:#000000;
 border-left-style:solid;
 border-left-width:thin;
 border-right-color:#000000;
 border-right-style:solid;
 border-right-width:thin;
 text-align:center;
 justify-content: center;
 flex-direction:column;
 color:#5F5F5F;
 font-size:1vw;
}
li:hover{
 background-color:#505050;
}
li:first-child{
 border-right:none;
}
li:last-child{
 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>

link:-http://stackoverflow.com/questions/15376634/how-can-i-center-a-div-within-another-div — Razia sultana, Nov 13 '16 at 17:00

Rob · Answer 1 · 2016-11-13T16:56:50.027

1

Right now, your nav element has a width of 100%, as all block level elements do by default. So there is no room to push up against the sides to center it.

So, you need to give it a width. Then, to center it, give it a margin-left:auto; margin-right:auto;

By making the width, say 50%, that gives your margin room to grow and push up against the sides of the viewport.

edited Nov 13 '16 at 16:56

answered Nov 13 '16 at 16:49

Rob

14,746
28
47
65

Thanks for explaining, it explains and gives visual representation which means loads. Thanks! – DownbeatTax Nov 13 '16 at 17:13

score 0 · Accepted Answer · answered Nov 13 '16 at 16:50

You can use CSS Flexbox.

Make your <nav> flexbox like:

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

body{
 margin:0;
}

header{
 height:2.5vw;
 width:100%;
 background-color:#2f2f2f;
 box-shadow: 0px 5px 5px #111111;  /* #888888 */
}
nav{
 display: flex;
    justify-content: center;
}
li{
 display:flex;
 height:2.5vw;
 width:20%; /* 33.2% 19.9vw */
 float:left;
 border-left-color:#000000;
 border-left-style:solid;
 border-left-width:thin;
 border-right-color:#000000;
 border-right-style:solid;
 border-right-width:thin;
 text-align:center;
 justify-content: center;
 flex-direction:column;
 color:#5F5F5F;
 font-size:1vw;
}
li:hover{
 background-color:#505050;
}
li:first-child{
 border-right:none;
}
li:last-child{
 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>

Hope this helps!

@DownbeatTax My pleasure! – Saurav Rastogi Nov 13 '16 at 17:10 — Saurav Rastogi, Nov 13 '16 at 17:10

score 0 · Answer 3 · answered Nov 13 '16 at 16:53

0

just give it a width then center it with margin:auto

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

answered Nov 13 '16 at 16:53

melbx

319
1
3
17

I'm trying to work with responsive webs, which means i'd rarely use pixels, since it really depends on devices which resolution they have, so it could look different on various devices. Thanks for your solution! – DownbeatTax Nov 13 '16 at 17:11
@DownbeatTax change it with percentage **%** – melbx Nov 13 '16 at 18:16

Centering DIV inside another DIV

3 Answers3