How to center a paragraph of text on a particular

Question

I have a passage that is centered on the page, like this:

 _________________________
|                         |
| Once upon a time, there |
|   lived a squirrel who  |
|  lived in the middle of |
|       the forest.       |
|_________________________|

I need to adjust the centering such that a specifically marked word is horizontally centered on the page. In this example, the word "who" is centered:

 _________________________
|                         |
|        Once upon        |
|  a time, there lived a  |
|  squirrel who lived in  |
|    the middle of the    |
|         forest.         |
|_________________________|

• The word who is marked in the HTML with a <div> tag, i.e. <center>Once upon a time, there lived a squirrel <div style="centered">who</div> lived in the middle of the forest.</center>.
• The HTML appears in an application in which I have little control over editing the HTML itself (the text is already marked with CSS style tags), but can modify the style sheet or add code, such as JavaScript to the header to modify how that style is rendered.

How can I center a passage on a particular word in HTML, CSS, or JavaScript?

Answer 1

While I agree that the html structure has issues, you mention that you have "little control" of it, so I am offering this answer purely with HTML as is. Without touching the HTML, the only way to get this with pure CSS is to allow the centered content to exist on its own line. So this works (see the fiddle):

center {
    text-align: center;
}
center div {
    width: 100%; /* really, the div should default to this, but just in case */
}

Answer 2

The only answer to what you want to achieve is: It's not possible!

And I also doubt that it would make any sense. To center a word in an already centered line in a centered text - what should this be good for!?

Especially when it comes to fonts and font sizes there are so many unknown variables (used font, user stylesheets etc.), that every attempt based on these things will fail.

And even any JS solution will fail, as it is most likely that due to the word lengths it is not possible to exactly center the "word" in the line without changing/ adjusting the word spaces before and after the "word" to get it absolutely centered.

If you really want such a "dalliance" go and create an image on the fly. In an image you might achieve your goal. With HTML, CSS and JS you won't.

And if I think of such useful things like CSS hyphenation, it really makes no sense to me what you are trying to achieve. Sadly you didn't answer on my comment on your question what this all should be good for.

Answer 3

Is your div a fixed width, or a variable width? If it is a fixed width (the demo width you have given), then add the previous and following word to the div, and add
before and after.

Once upon a time, there lived a
squirrel who lived
in the middle of the forest..

and then center-align the paragraph.

.centered{ text-align: center }

If the div is a variable width, you could try a JavaScript function that accepts the div width and the font size as arguments, and that will decide how many words (both before and after) should be added.

It's a workaround that basically tries to fit as many words in a line as possible. Since a word is added after the "center" for every word added before the "center", your word should remain in the middle.

Answer 4

This is a really cool way to do this using javascript I made just for you! haha here is the fiddle http://jsfiddle.net/7Ykzp/2/

var words = text.split(" ");

we split it into words then try to fit them on a line we put this in a center in between two centers containing the previous and following text

a note we add 8 to the line width each time we try to add two more words to account for the size of spaces

edit: updated to properly place who based on word length
edit2: updated to now properly backwards wrap the text above the centered word! check it out!

Answer 5

Answer is, unfortunately, you can't do what you are asking with HTML/CSS.

To do this, you would need to either set some widths to force the text to break to the next line, or (preferably) insert a <BR> tag where you want to break the line. HTML and/or CSS have no way of doing it for you. As Anderson notes below, you will be able to find a way to do it with JS if need be.

Answer 6

The easiest way is to just insert a line break <br> after each line:

Here is an example jsfiddle

HTML:

<div class="container">
   <p>
     Once upon<br>
     a time, there lived a<br>  
     squirrel who lived in<br>
     the middle of<br>
     the forest.
   </p>
 </div>

CSS:

.container {
    border: 1px solid #666;
    padding: 1em;
    width: auto;
    text-align: center
}