Center div in div margin auto doesn't work

Question

Hi I have the following code: CSS

.center{
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>
    </body>
</html>

I also tried .center without width: I searched throught themes here but I didn't find a solution. .nav div still stays on the left. Thank you for your help.

Have you tried to add `margin: 0 auto;` to `.nav` and then set `text-align: center` ? — Krusader, Oct 18 '17 at 10:43
I've added an answer below so if it helped you please consider to check it as answer. — Krusader, Oct 18 '17 at 10:48

score 2 · Answer 1 · answered Oct 18 '17 at 10:44

Give margin:0 auto to .nav class not to .center class.

.center{
  width: 100%;   
  border: 1px solid red;
}

.nav{
  background: #606060;
  width: 90%;
  margin:0 auto;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>
    </body>
</html>

score 0 · Answer 2 · answered Oct 18 '17 at 10:45

You don't need to define margin: 0 auto; when width is 100%. It is required if you want to position division of fixed width to the center of parent div.

.center{
    width: 100%;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
    margin: 0 auto;
}

<div class="center">
     <div class="nav">
        <p>Ahoj</p>
     </div>
</div>

score 0 · Answer 3 · answered Oct 18 '17 at 10:47

0

Add this CSS to your .nav class

.nav {
 .
 .
 margin: 0 auto;
 text-align: center
}

answered Oct 18 '17 at 10:47

Krusader

116
6

score 0 · Answer 4 · answered Oct 18 '17 at 10:55

block level elements can't be centerd because its always fit in 100% width of its container so I suggested to use inline-block instead.

.center{
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
    text-align:center;
}

.nav{
    background: #606060;
    width: 90%;
    display:inline-block;
}

        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>

score -2 · Answer 5 · answered Oct 18 '17 at 10:44

-2

.nav {
background: #606060;
width: 90%;
display: block;
margin: 0 auto;

}

answered Oct 18 '17 at 10:44

Kyobul

759
1
7
17

3

where is the explanation, just dumping code is not a good answer – dippas Oct 18 '17 at 10:50
*perfectly fine?* can you describe the solution? explain why this CSS code should work. I can see only CSS code (no snippet, not well formed). I *(I'm not the downvoter)* – Sebastian Brosch Oct 18 '17 at 10:51
Sorry, I didn't think a whole tutorial was needed for such a question. Since when stackoverflow became a tutorialzine ? – Kyobul Oct 18 '17 at 10:53
read the help: https://stackoverflow.com/help/how-to-answer – Sebastian Brosch Oct 18 '17 at 10:55
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) its long-term value by showing *why* this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made. – Toby Speight Oct 18 '17 at 11:46

Center div in div margin auto doesn't work

5 Answers5