Jump to content
louie

Vertical Centering

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?

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites
html doesnt have a style to it,

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.

Share this post


Link to post
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...

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...