Jump to content

Vertical Centering


louie

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...