CODEWITHSUNDEEP
css
Susan Mintz
Susan Mintz

Reputation: 41

centering of div inside body

I have this html:

<body>

<div id="maindiv" class="rounded">
something written
</div>

</body>

with this css:

body {
background-image: url('stjohnhusimages/green gradient.png');
background-repeat: no-repeat;
width:1024px;
height:1375px;
background-size: cover;
text-align:center;
}

#maindiv {
width:900px;
height:1275px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background-color:#404853;
}

but the main div is still getting aligned to the left. Wondering what I'm doing wrong.

Thanks for any help!

Upvotes: 4

Views: 4949

Answers (2)

Alexander44
Alexander44

Reputation: 198

is not necessary to have a fixed width size to the body, if the body is fixed width the inner div will not center and will depend on the size of it.

For the div is centered should remove the fixed width of the body

body {
background-image: url('stjohnhusimages/green gradient.png');
background-repeat: no-repeat;
background-size: cover;
text-align:center;
}

Upvotes: 0

sachleen
sachleen

Reputation: 31141

If you put a constraint on your body, the div will only center within that.

The width/height should be set on the div, not the body.

body {
background-image: url('stjohnhusimages/green gradient.png');
background-repeat: no-repeat;
background-size: cover;
text-align:center;
}

Demo

Upvotes: 2

Related Questions