How to center all elements in html?

Question

First I have checked and this is NOT a duplicate. The conditions are totally different than other questions here. Please read my whole post before making an answer.

I have a ASP.NET page with unknown width and height size and I want to center all elements in it. No matter if it's inline or block.

The <center> tag does what need but it's obsolete.
The text-align:center; does not work in all conditions. [inline]
The margin:auto; does not work in all conditions. [block]

What already works for all web browsers is the following piece of code :

<div style="float: left; position: relative; left: 50%;">
    <div style="float: left; position: relative; left: -50%;">
       my elements here
    </div>
</div>

This piece of code works in all conditions but it causes Rad Telerik Ajax popups elements to have unknown popup position which usually appear outside page.

So what is EXACTLY equivalent to <center> tag which works for all browsers ?
Please don't post current solutions which I have mentioned here !

Considering you're doing something that was popularly done in the 90s anyway, why don't you just use ``? — BoltClock, Feb 17 '13 at 12:22
In my question mentioned : The tag does what need but it's obsolete. — Mohsen Sarkar, Feb 17 '13 at 12:24

score 5 · Accepted Answer · answered Feb 17 '13 at 12:25

AMAIK, you can't achieve what you're searching for, without applying all the methods you know. Take email clients for example, they don't understand much of the new technologies we already have (not even an external StyleSheet). So, it's a common practice that you use <center> tag for older render engines (including browsers).

This is the concept of fallback and degradation, but in the presentation layer, not in the behavior layer. In other words, what should matter in your design, is to make that button send the data back to the server via ajax, and if the browser doesn't support ajax, via a simple POST. But it might be centered in one browser, and not in another.

I do recommend that you take a look at this brilliant website:

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

By the way, have you tried to force the centering on every element on your page:

*
{
text-align: center !important;
margin: auto !important;
}

It is not a website. It's a web application [game]. **It has to be same in all browsers** — Mohsen Sarkar, Feb 17 '13 at 12:29
Your updated code works and is the exact equivalent to center tag. Accepted your answer from Isfahan. — Mohsen Sarkar, Feb 17 '13 at 12:37
Great, good to see someone from Isfahan here. Welcome buddy. — Saeed Neamati, Feb 17 '13 at 12:40

score 0 · Answer 2 · answered Feb 17 '13 at 12:34

0

as verbumSapienti mentioned: margin: 0 auto, but it needs a width for that to work.

item{ width: 50%; margin: 0 auto;}

answered Feb 17 '13 at 12:34

Lesonschi

74
4

How to center all elements in html?

2 Answers2