Align contents inside a div

html css text-align
Hemanshu Bhojak picture Hemanshu Bhojak · Mar 26, 2009 · Viewed 471.5k times · Source

I use css style text-align to align contents inside a container in HTML. This works fine while the content is text or the browser is IE. But otherwise it does not work.

Also as the name suggests it is used basically to align text. The align property has been deprecated long back.

Is there any other way to align contents in html?

Answer

bobince picture bobince · Mar 26, 2009

text-align aligns text and other inline content. It doesn't align block element children.

To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.

<div style="width: 50%; margin: 0 auto;">Hello</div>

For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE.

If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)

Related questions

Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More
How to center images on a web page for all screen sizes

I'm having a problem with my HTML. I've searched all over the internet, but still no real answer. I have a website with some images, and I want them to be in the middle. Now, on my screen they're in …

Read More
center h1 in the middle of screen

How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ? div { height: 400px; width: 800px; background: …

Read More