How to center part of a text with CSS?

[MGChris]

Prior to HTML5 it was possible to dynamically format a text so that a heading of 1 to 3 lines could be centred and the balance of the text left justified. The <center> </center> construct did this. HTML 5 has cancelled the command and the note says use CSS. Could someone explain how CSS might replicate the dynamic formatting.

 

[Ingolme]

To center block elements, give them a width and set the left and right margins to auto. To center inline elements set the text-align property of their parent to "center"

[MGChris]

Thanks Ingolme,

 

I am aware of the CSS you are suggesting but neither provides dynamic formatting.

Example - String = "<center>This is a heading</center></br><center>Another Heading</center></br> This is the text of a report which can be multiline and is left justified"

used to format with two centred headings and a left justified text. The number of headings may vary from one to as many as are necessary. Now it is all left justified which is not what the customer wants.

[dustcomposer]

what do you mean 'dynamic formatting' (sorry, I don't speak English well).

Edited November 6, 2014 by dustcomposer

[dsonesuk]

String = '<p style="text-align: center;">This is a heading</br>Another Heading</p><p style="text-align: justify;">This is the text of a report which can be multiline and is left justified</p>'

 

OR if you don't want space caused by paragraph margins between centred header text and text below it

 

String = '<p style="text-align: justify;"><span style="display: block; text-align: center;">This is a heading</br>Another Heading</span>This is the text of a report which can be multiline and is left justified</p>'

Edited November 9, 2014 by dsonesuk

[MGChris]

Thanks dsonesuk. That does exactly what I used to do using the <center> construct and a javascript plug into the divid.innerhtml of the screen.

 

To dustcomposer - By "Dynamic Formatting" I am saying that the actual text is created by the server depending upon the rules that apply to the information being displayed in the text. Thus one display may require two headings (centred) above the text, another display may require the addition of bolding and underline to the two headings, another may only have one line of heading. Each format is displayed using the same CSS and asp.net controls in the same are of the client screen. dsonesuk solution works great. Try it. Cut and paste the second example into a <div> </div> block.

[dustcomposer]

The <center> tag is not supported in HTML5. You need to add Style attribute to align an element, just like dsonesuk has told or using external CSS.