louie Posted October 12, 2005 Share Posted October 12, 2005 Take a look at this example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title>Testing</title><style type="text/css">body, html { background: #CC3300; text-align: center}#test { width: 300px; height: 300px; margin-left: auto; margin-right: auto; background: #FFF}</style></head><body><div id="test"> some text here.</div></body></html> I am trying to center the text inside the div vertically. I have tried using the vertical-align property but doesnt seem to work. I have seen some examples elsewhere but uses 2 divs instead of one. Is there a way to do it using only one div? Link to comment Share on other sites More sharing options...
WiCkEdStYlZ` Posted October 12, 2005 Share Posted October 12, 2005 you cannot vertically align text alone without using more than 1 div, or a table... this css was meant mainly for aligning objects such as images to the text next to it... if u wana do it with text, do what the other pages designer did, with 2 div's.if ur attempting to do it with an image heres what to do: vertical-align: middle; put that in #test... maybe u were using 'center' instead of 'middle'AND also a bit of dodgy css here body,html { html doesnt have a style to it, so your css should read this: <style type="text/css">body {background: #CC3300;text-align: center;}#test {width: 300px;height: 300px;margin-left: auto;margin-right: auto;background: #FFF;}#text img {vertical-align: middle;}</style> Link to comment Share on other sites More sharing options...
louie Posted October 12, 2005 Author Share Posted October 12, 2005 whew! i was really hoping there was another way. Then 2 div's it is. Link to comment Share on other sites More sharing options...
F-Man Posted October 12, 2005 Share Posted October 12, 2005 html doesnt have a style to it,<{POST_SNAPBACK}> Wrong. html is the right selector to use when you want to style the whole window content.Remember, body is just like a normal div using the same size as the content in your page, and is treated as such in XML applications. Link to comment Share on other sites More sharing options...
Jonas Posted October 12, 2005 Share Posted October 12, 2005 Could one use <div><span></span></div> as opposed to <div><div></div></div> ?Would make it easier to write into the right tag... Link to comment Share on other sites More sharing options...
WiCkEdStYlZ` Posted October 12, 2005 Share Posted October 12, 2005 me being kind as i am i tested a few things out for ya lol... if ya put the text into the div inside a paragraph it should vertically align itself... try this.The CSS part... <style type="text/css"><!--div.container {width: 100%; height: 100%; position: fixed; display: table; }p {display: table-cell; vertical-align: middle; }--></style> Then the HTML part... <div class="container"><p>This is vertically and horizontally centered.</p></div> that should work :)Matt 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