Centering Elements Vertically and Horizontally Using XHTML Strict

This post was originally posted by me at </dream.in.code>. (click for original link)

It’s been quite tricky for some people to align objects using XHTML Strict, because of the restriction for using the align attribute. This short tutorial will give you a quick fix to centering your things horizontally and/or vertically on a page.

First, let’s design the XHTML. This will be very simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Centering Example</title>
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<div class="centerme">
			This text will be centered on the page.
		</div>
	</body>
</html>

Now we need to work on the CSS, which will actually center the div element we just created.You can see that we linked to the stylesheet style.css in our XHTML file. Create that file:

.centerme {
	border: 1px dashed #CCCCCC;
	width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -150px;
}

Now that you look at the CSS code, you can realize how simple this actually is. We define a height and width, and position it 50% from the left, and 50% from the top. However, just doing that would make the element start at 50% of the page. We need to make it already halfway there once it is at 50%. So, to do that, we give the element a negative top and left margin of half its size.There you go! Your element should be positioned perfectly in the center of the page. And we did it all within the restrictions of XHTML Strict!😀

Did you find this article useful? Please leave a comment to let me know. Don’t worry, you don’t need to register for a simple comment.

23 Responses to “Centering Elements Vertically and Horizontally Using XHTML Strict”


  1. 1 Idetrorce December 15, 2007 at 6:58 am

    very interesting, but I don’t agree with you
    Idetrorce

  2. 3 vg December 27, 2007 at 3:01 pm

    I searched a bit and couldn’t find anything useful until I came across this. It’s a valid solution which works, but then again looks like a not so neat hack. But acceptable and I will use it since XHTML strict simply doesn’t give you many options do this in a better way. Thanks Engel!

  3. 4 Tyler April 30, 2008 at 2:13 am

    really useful! Thank you so much!🙂

  4. 5 MrRobot August 10, 2008 at 2:05 pm

    Engel :

    Message from “Idetrorce” is a spam from a bot, you can simply delete it.

  5. 6 Jaybuz August 21, 2008 at 10:41 am

    Searching a while and this has got to be the best solution i’ve found , thanks

  6. 7 noop September 9, 2008 at 4:18 am

    what about centring a page ? can’t fix the size (or get scroll bars)
    don’t want it 50% in… because that’s half way. you don’t know the % in… i use xhtml + css because i’m told i’m supposed to, however i find OLD htmls much easier, and sometimes will do a page in that… using tables for layout. Html is a pile of crap…

  7. 8 Finally!! January 3, 2009 at 2:05 am

    You don’t know how long I’ve searched for this siple method.
    Thanks you.

  8. 9 anggo84 March 1, 2009 at 11:30 pm

    how if i use a dynamic width or dynamic height

  9. 11 http://google.com February 12, 2013 at 12:31 pm

    I really would like to bookmark this specific blog, “Centering Elements Vertically and Horizontally Using XHTML Strict
    Obsessed with the Press” on my personal page. Do you really care in the event I reallydo?
    Thx -Luis

  10. 12 finance help June 9, 2013 at 11:08 pm

    Pretty! This was an incredibly wonderful article.
    Thank you for supplying this information.

  11. 13 prasy automatyczne June 24, 2013 at 4:42 am

    The Universe is literally not going to help set your wrong doing right magically.
    Your trees can provide innate cooling by shading your house.

  12. 14 hosting a bridal shower June 26, 2013 at 9:56 pm

    It’s going to be end of mine day, but before finish I am reading this great piece of writing to increase my experience.

  13. 15 budget software free June 27, 2013 at 3:28 am

    great points altogether, you just received a logo new reader.
    What may you suggest in regards to your post that you made
    a few days in the past? Any sure?

  14. 16 Robert July 21, 2013 at 3:22 pm

    Each of your buddies fortitude adore all of the information
    that you have given them as some of these online Olympics are a little sophisticated abstract it will take accurate although for John
    Doe against be up to at about all of the various levels.
    Playing online Olympics is a magician hobby-horse for John Doe when
    they are done in line with their ache absolute music decade.
    Online carousel be up to take it easy accurate actor annex rented them bracing out shoplift amend in line with acme of their online friends according to absolute want
    academic year inside accomplish that could outreach been a little contrary.

  15. 17 financial help July 21, 2013 at 10:43 pm

    If you desire to obtain a good deal from this article then you have to apply these techniques to your won webpage.

  16. 18 ipad 3 pris July 23, 2013 at 6:11 am

    Have you ever thought about creating an e-book or guest authoring on other blogs?
    I have a blog based on the same subjects you
    discuss and would really like to have you share some stories/information.
    I know my audience would enjoy your work.
    If you’re even remotely interested, feel free to shoot me an e-mail.

  17. 19 good advice August 14, 2013 at 12:36 am

    Every weekend i used to pay a visit this web page, as i wish
    for enjoyment, since this this web page conations actually good funny
    information too.

  18. 20 Le Papillon On The Park August 8, 2014 at 1:26 pm

    I must thank you for the efforts you’ve put in penning this
    site. I really hope to check out the same high-grade blog posts
    from you later on as well. In truth, your creative writing abilities has encouraged me to get my own website
    now😉

  19. 21 executive coach cleveland August 9, 2014 at 12:34 am

    I have learn a few just right stuff here. Certainly worth bookmarking for revisiting.
    I surprise how so much effort you set to create such a fantastic informative site.

  20. 22 executive coach cleveland August 9, 2014 at 12:35 am

    Very good info. Lucky me I recently found your website by accident (stumbleupon).
    I have book-marked it for later!

  21. 23 best adjustable bench October 3, 2014 at 12:42 am

    It’s in point of fact a nice and useful piece of information. I’m glad that you just shared this helpful info with us.
    Please stay us up to date like this. Thanks for sharing.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: