{margin: 0px auto;} not centering div

Question

Please take a look at https://jsfiddle.net/p1ys5yj3/1/

I trying to center what is dotted in red .question{ } to the center of the page with margin: 0px auto; but it is not working.

margin-left: seems to work but I am not sure why margin: 0px auto desn't.

I tried

text-align
Removing .question { float: answer;}
and .question { display: block;}

You have a `max-width` set on your `content` div of 600px. Your `question` class is centered...you just won't ever see it. — disinfor, Mar 26 '18 at 02:55
Unless you want to support older browser, I'd highly recommend using [Flexbox for all of this, it makes things like this much simpler](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). — Erik Philips, Mar 26 '18 at 03:08

score 1 · Answer 1 · answered Mar 26 '18 at 02:59

1

Remove max-width from .content and add text-align: center;. Hope this what you want.

answered Mar 26 '18 at 02:59

nithin

153
15

score 1 · Answer 2 · answered Mar 26 '18 at 05:31

1

Please modify the CSS in .content class by removing

padding:30px auto

and add

margin: 30px auto

then remove the

max-width

from .question class and add

width: 100%

I think this should resolve your problem.

answered Mar 26 '18 at 05:31

Kaustavi Banerjee

47
3

score 1 · Answer 3 · answered Mar 26 '18 at 05:55

Update your css with,

.content {
 text-align: center;
}
.question {
 text-align: center;
 position: static;
 top: 40px;
 border: 1px dotted red;
 display: inline-block;
 box-sizing: content-box;
 width: 800px;
 margin: 0px auto;
 padding: 30px;
}
.answer {
 margin: 20px;
 text-align: center;
 display: inline-block;
}

{margin: 0px auto;} not centering div

3 Answers3