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 !

Answer 1

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;
}