Jump to content
MGChris

How to center part of a text with CSS?

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.

 

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...