DJKAL Posted May 24, 2006 Share Posted May 24, 2006 i want to center a <div> tag that i have placed links in. but not sure how.i have got my .div tag with borders etc, then set the <li></li> tags to display inline and that is ok, but how do i now go about centering the whole thing(i have not added <ul></ul> tags - will this matter?)on a small side note: when do you use "#" and "." cos i use "." for div tags but wasnt sure if "#" does the same.thanks. Link to comment Share on other sites More sharing options...
pulpfiction Posted May 24, 2006 Share Posted May 24, 2006 Styles written under # applies to the tag which has same ID name, and . means CSS class this style can be used for any tag by calling the class. Class is written once and used by many elements, ID's are particular to that tag which the same ID name.Example: <html><style>#id1{color:red;float:left;}.class1{color:bluefloat:right}</style><body><div id="id1">..............</div><div class="class1">..............</div><p class="class1">..........</p></body></html>The styles in the .Class1 will apply to both the Div and <p> Link to comment Share on other sites More sharing options...
pulpfiction Posted May 24, 2006 Share Posted May 24, 2006 This is how I do it, there could be a better way. Wrap the existing div with another div<style>.container{ text-align:center;}</style><body><div class="container"> <!-- wrapping div --><div>This is your existing div</div></div></body>HTH Link to comment Share on other sites More sharing options...
DJKAL Posted May 24, 2006 Author Share Posted May 24, 2006 This is how I do it, there could be a better way. Wrap the existing div with another div<style>.container{ text-align:center;}</style><body><div class="container"> <!-- wrapping div --><div>This is your existing div</div></div></body>HTH<{POST_SNAPBACK}> i have just treid this but it didnt work :)and thanks for the info on ID's and calsses Link to comment Share on other sites More sharing options...
pulpfiction Posted May 24, 2006 Share Posted May 24, 2006 Instead of wrapper, try writing in bodyCSS:body { text-align: center;} Link to comment Share on other sites More sharing options...
Tarte Posted May 24, 2006 Share Posted May 24, 2006 Yeah that would be better Link to comment Share on other sites More sharing options...
DJKAL Posted May 24, 2006 Author Share Posted May 24, 2006 Instead of wrapper, try writing in bodyCSS:body { text-align: center;}<{POST_SNAPBACK}> would this cause all my text to be centered also because i want the text to stay aligned to the left? Link to comment Share on other sites More sharing options...
scott100 Posted May 24, 2006 Share Posted May 24, 2006 would this cause all my text to be centered also because i want the text to stay aligned to the left?<{POST_SNAPBACK}> Try this:<html><head><style type="text/css">div {text-align: center}h2 {text-align: left}</style></head><body><div>This is a centered div</div><h2>This is header</h2></body></html> Link to comment Share on other sites More sharing options...
DJKAL Posted May 25, 2006 Author Share Posted May 25, 2006 thanks for that code, the text has to be in the <div> tags though.i have now found that by wrapping the one div tag by another it will work in internet explorer and centrs the div tag.but i use firefox and it does not display the menu in the middle (not when using the "tect-align: center;" in the "body" section eitheris there any reason for this?the link to the webpage is:www.survivors-haven.co.uk/home.htmand for the CSSwww.survivors-haven.co.uk/style.css (some of that needs to be reodered but that is just for me to see it clearer when editing the site later Link to comment Share on other sites More sharing options...
scott100 Posted May 25, 2006 Share Posted May 25, 2006 ok so i move the <h2> into the <div> and it worked in both IE and FF <html><head><style type="text/css">div {text-align: center}h2 {text-align: left}</style></head><body><div>This is a centered div<h2>This is header</h2></div></body></html> Link to comment Share on other sites More sharing options...
DJKAL Posted May 25, 2006 Author Share Posted May 25, 2006 it's ok now,i used "<div align="center"><div class="....and that has worked ok - thanks for you help also:) Link to comment Share on other sites More sharing options...
aspnetguy Posted May 25, 2006 Share Posted May 25, 2006 do this -- you need to use a XHTML DOCTYPE for this to work.CSS .center{ width: 400px; /*you have to specify a pixel width for this to work*/ margin: auto;} HTML <div class="center">Content here</div> This should work in all browsers Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now