CSS for <center>

You can try this
CSS

center > * {
	text-align: left;
}

Select allOpen in new window

HTML

	<center>
		only center this bit
		<div>This should not be centered</div>
	</center>

Select allOpen in new window

Found at least one problem with this. In some cases there are structures like the following:

<center>
  <div id="1">
    <div id="2" style="width:100px;">

Select allOpen in new window

So, the div#2 has to be centered even though it's not a direct child of <center> and its descendants should not be centered (unless there another <center> inside).
There could be one or more divs between <center> and the element to be centered (either with width set or default with is collapsed (like a table))

Sorry I did not give a clear explanation in the original post.

So what is the rule then?

I seriously hope you are not using pure numerics as your id's ?

If there are exceptions you would need to target those specifically. There is no general rule that is going to cover your scenario.

#idofelement {
  text-align: <whatever is required here>
}
#idofelement > * {
  text-align: <whatever is required here>
}

Select allOpen in new window

I believe, the rule is - center the first <center>'s descendant which has not 100% width (i.e. skip all those like div#1), but not its descendants.
Here is another example, similar to the previous one, nothing new:

<center style="background-color: #0FF;">
  <div id="d1" style="background-color: #FF0;">
    <div id="d2" style="width: 300px; background-color: #0F0">
      text
      <div id="d3" style="width: 100px; background-color: #00F">
        text
      </div>
    </div>
  </div>
  <div id="d4" style="width: 300px; background-color: #F00">
    text
      <div id="d5" style="width: 100px; background-color: #00F">
        text
      </div>
  </div>
</center>

Select allOpen in new window

div#d1 has width=100%, so its existence should be ignored
div#d2 itself should be centered
div#d3 and the text should be aligned to the left
div#d4 itself should be centered
div#d5 and the text should be aligned to the left


I could search all the <center> elements within the site an replace them with something like <div class="center"> if that could help.

Upd.: just found out that Mozilla browser renders that sample as desired, but Chrome and IE center everything

Your suggestion gave me an idea to assign a class or an additional attribute to all meaningful divs which need to be centered (I believe I can do that for whole project at once), and then use a rule like:
center div.new_assigned_class { text-align: left; }

One more question, the documentation says:

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.

Why then the text-align:left makes the inner divs which are block elements also be aligned to the left, not only the inner text? Is there something that I might not understand and need to be aware of?

Why then the text-align:left makes the inner divs which are block elements also be aligned to the left, not only the inner text?

They are not (or shouldn't be) by definition a block element takes up all the available space. Therefore the text-align has no effect only on what is in the block.
Consider a <div></div> in the document - this will attempt to take up all the available space it can. If you now say text-align: left on it - where is it going to go - it is already back and feet to the walls of the container - no space left and right for it to maneuver so no effect - the contents however will be aligned relative to the container they are in so if centered will have equal space left and right within the container.

What are alternatives for the <center> ?
An element could be centered with "margin: 0px auto;" , but what to do if it still has to have left/right margins (so extra space will remain when the parent container squeezes)? What are the best practices?

What is it you are wanting to do?

I was considering of automated replacement of <center> with a "margin: 0px auto;" solution, but realized that could conflict with inner elements which have its own left/right margins. I cannot assign the auto margin to them, I probably need to create an extra wrapper with "margin: 0px auto;", but what width it should be? should I make it "display: table" to be automatically squeezed?..

Thank you for the explanations.

You are welcome.