Jump to content

How to center part of a text with CSS?


MGChris
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...