[SOLVED] center align using CSS

[invincible_virus]

I have a div tag, with some other HTML elements in it.

<div align=center>
...
<div>

can I achieve the effect of "align=center" in the div tag using css somehow?

I can align the text using text-align property, but it doesn't work for HTML elements.

{text-align: center}

Thanks,

Saurabh

[teng84]

<style type="text/css">

div{text-align:center}

</style>

<div>

 

or ---

 

<div style="text-align:center">

 

[invincible_virus]

Thanks teng84.

Actually, I have a text-label & a combobox inside that <div> tab.

Now, after using <div style="text-align:center"> -

1. text-label is center aligned.

2. combobox is still left aligned.

 

text-align property only works for text & not for any html elements.

[JasonLewis]

What do you mean, it should work.

 

The below centers on the page:

<div style="text-align:center">
Hello:	<select name="something">
		<option value="something">Hey</option>
	</select>
</div>

[invincible_virus]

Apologies.

Its working fine.

I'm using ExtJS framework, maybe something is over-writing my css class properties.

I need to spend some more time investigating.

Thanks for help.

[wildteen88]

To center align block level element such as a div you should use auto-margins

Example

div { 
    width: 80%; /* You must specify a width in order for auto-margins to work; */
    margin: 0 auto; /* Center align the div */
}

 

Never use text-align to center align block level elements, it will only affect the text within the element and not where it positions on the page.

[JasonLewis]

I thought auto margins only worked in FF and not IE. IE requires you to use text-align.

[invincible_virus]

Yes. Auto margins is not working in IE.

[JasonLewis]

Auto-margins work differently to text-align anyway. It depends on what you're after, but IE treats text-align differently to FF.

 

In FF, text-align sets the text inside the div to be aligned to the center. IE however, will center the text but also center any divs that are inside the parent div. Darn IE.

[wildteen88]

auto-margins work fine in IE6+. I have never used text-align to align block level elements.

 

WIth IE you need to have a valid DOCTYPE present. Without a doctype IE will render your page incorrectly as its in quirks mode.

[JasonLewis]

Ah, I see. I use a DOCTYPE but I still use text-align for IE, because I remember reading that auto margins did not work in IE. Thanks for clearing that up.