tinfanide Posted April 30, 2011 Share Posted April 30, 2011 <style>.wrapper { position:relative; background-color:green; margin: 0 auto; width:1000px; height:800px; }.left-nav { background-color:blue; float:left;}.right-nav { background-color:red; float:right; transform: rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg);}p { color:white; text-align:center; font-size:36px;}.button { margin: 0 auto; }</style><div class="wrapper"><p>wrapper</p><div class="left-nav"><p>left-nav</p></div><div class="right-nav"><p>right-nav</p></div><input class="button" type="button" value = "Click to rotate!" /></div> I wonder why the button still cannot be centred in css even I set margin = 0 auto but it does the job for the div wrapper.Thanks for any reply! Link to comment Share on other sites More sharing options...
jeffman Posted April 30, 2011 Share Posted April 30, 2011 Set its display property to block Link to comment Share on other sites More sharing options...
dsonesuk Posted April 30, 2011 Share Posted April 30, 2011 margin:0 auto; only works for block element with fixed width, the input is a inline element, and has no fixed width so won't work with margin: 0 auto;fixes: 1)place input button within block element div, and give div text-align:center;2)turn input button into block element with display:block; ,set to fixed width: 100px foe example, then use margin: 0 auto; to centre; Link to comment Share on other sites More sharing options...
tinfanide Posted April 30, 2011 Author Share Posted April 30, 2011 It works. Thanks for the fix and the explanation. I know why it is now. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 30, 2011 Share Posted April 30, 2011 if you don't set the width, it won't work in all browsers, i think chrome is one. Link to comment Share on other sites More sharing options...
tinfanide Posted April 30, 2011 Author Share Posted April 30, 2011 if you don't set the width, it won't work in all browsers, i think chrome is one.Without width, it works fine in IE and Firefox.I have not tested it in other browsers. Yet, some articles online seemed to talk like width is important (well, I should say essential) to css centering.CSS - a hurdle as high as that of JS to me... complicated rules in its handbook... Link to comment Share on other sites More sharing options...
dsonesuk Posted April 30, 2011 Share Posted April 30, 2011 just tested without width and it failed in chrome, and IE8? but was ok in FF, Opera, and would you believe it IE6/7 crazy huh Link to comment Share on other sites More sharing options...
tinfanide Posted April 30, 2011 Author Share Posted April 30, 2011 just tested without width and it failed in chrome, and IE8? but was ok in FF, Opera, and would you believe it IE6/7 crazy huhYes, my IE is IE8, my firefox is firefox 4.0.1. It is fine in IE8. Don't know how it works in IE7.I never use IE6 in my life; too many css things not compatible... yeah... it's crazy browser Link to comment Share on other sites More sharing options...
dsonesuk Posted April 30, 2011 Share Posted April 30, 2011 Are you sure its IE8?I just tested in IEtester under IE6 to IE9, and IE6, 7 and 9 where fine but IE8 Failed totally, I am using with doctype specified. Link to comment Share on other sites More sharing options...
tinfanide Posted April 30, 2011 Author Share Posted April 30, 2011 Are you sure its IE8?I just tested in IEtester under IE6 to IE9, and IE6, 7 and 9 where fine but IE8 Failed totally, I am using with doctype specified.Yes, you're right, thanks to your seriousness. I mistook dreamweaver previewer as my IE8. In DW, it showed exactly as FF4.0.1 did.Unless I set the width, IE8 does not centre the button even with display:block. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.