CODEWITHSUNDEEP
htmlcss
ghp1968
ghp1968

Reputation: 61

Why can't I centre a div?

I cannot seem to centre the bottom div. (middle9).

The HTML and CSS appears to be the same as the above code.

I apologise in advance if it is obvious, but I just cannot see it.

http://www.garyhornephotography.com/str/index.html

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { float:right; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }
<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

Upvotes: 3

Views: 124

Answers (7)

Able Varghese
Able Varghese

Reputation: 77

I know it can be very frustrating to center the div since they don't have the align: "center" tag working anymore in HTML5. You can also try this to center align the whole webpage.

This is the easiest way to center any div tag.

Apply the following CSS to it.

#divInner {
    width: 50%; 
    margin: 0 auto; 
}

Obviously you can change the width as you wish. The key part is setting margin as "auto".

If you want to control your margin on the left and right, replace the above "margin" property with the following.

margin-left: 0 auto;
margin-right: 0 auto;

Upvotes: 0

n1c01a5
n1c01a5

Reputation: 88

The easy way (without float) :

#wrap9 { width: 900px; height: 300px; background-color:#F67E07; text-align:center; margin: 3px auto 0 auto;}

#sub_left9 { display:inline-block; width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }
<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

If your divs display with inline-block, they will follow of the same flow and they are centered with the property texte-align:center by #wrap9.

Upvotes: 0

gavgrif
gavgrif

Reputation: 15509

you are missing the id selector # off the css for the wrap9 - try this

#wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { float:right; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }
<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

Upvotes: 8

solimanware
solimanware

Reputation: 3052

You forgot to add #wrap9 add it as follows

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

Upvotes: 0

Ber
Ber

Reputation: 695

#sub_right9 {
margin-left: auto; margin-right: auto; left: 0; right: 0; position: relative; float: none; 
}

Floating takes an element out of the normal flow of the document, and there is no center float value. Hence, you'll want to replace your CSS with the above to tell the 'right 9' green block to align to the center of the page.

Upvotes: 0

wonghenry
wonghenry

Reputation: 689

It looks like you already accomplished that in wrap 6 and wrap 7. You didn't define anything for wrap 9.

I would just make that a class, so you can re-use code :) :)

Upvotes: 0

jonode
jonode

Reputation: 797

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; }
#sub_right9 { float:left; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; }
#sub_middle9 { float:left; display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }
<div id="wrap9">

<div id="sub_left9"> left 9</div>
<div id="sub_middle9"> middle 9 </div>
<div id="sub_right9"> right 9 </div>

</div><!--wrap9 -->

Just float them all left. :D

Upvotes: 3

Related Questions