How to center the last line of text in CSS?

Question

How can I centralize the text?

Currently, excuse does not center the last line.

Answer 1

You can use the text-align-last property

 .center-justified { text-align: justify; text-align-last: center; } 

Here is the compatibility table: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility .

Works in all browsers except Safari (both Mac and iOS) , including Internet Explorer.

Also, Internet Explorer only works with text-align: justify (no other text-align values) and start and end are supported.

Answer 2

For people who are looking for text that is both centered and justified, the following should work:

 <div class="center-justified">...lots and lots of text...</div> 

With the following CSS rule (adjust the width property if necessary):

 .center-justified { text-align: justify; margin: 0 auto; width: 30em; } 

Here is a live demonstration .

What's happening?

• text-align: justify; ensures that the text fills the entire width of the div in which it is enclosed.
• margin: 0 auto; is actually a shorthand for four rules:
  • The first value is used for margin-top and margin-bottom rules. Therefore, all this means margin-top: 0; margin-bottom: 0 margin-top: 0; margin-bottom: 0 , i.e. no margins above or below the div .
  • The second value is used for margin-left and margin-right rules. Thus, this rule leads to margin-left: auto; margin-right: auto margin-left: auto; margin-right: auto . This is a smart bit: it tells the browser that any free space is available on the sides and evenly distributes it on the left and right edges. The result is centered text.
    However, this will not work without
• width: 30em; which limits the width of the div . Only when the width is limited, are there spaces left for margin: auto to spread. Without this rule, the div will occupy all available horizontal space and you will lose the centering effect.

Answer 3

works with this code

 text-align: justify; text-align-last: center; 

Answer 4

There seems to be no way. You can fake it using alignment, and then wrapping the last line of text in the gap and setting only that text to the center of the text alignment. It works fine for small blocks of text, but is not a useful approach to a lot of text or dynamic text.

I suggest finding someone in Adobe who participated in their W3C work and pushing them to bring the right / right to the left / center at the next meeting. If someone can click on the basic typography features in CSS, it will be Adobe.

Answer 5

 <div class="centered"> <p style="text-align: justify;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque</p>nisl consectetur et.</div> 

I managed to achieve the result by wrapping the contents with a div tag and applying the text-align: center attribute. Immediately after the div tag, I wrapped the contents in a paragraph tag and applied the text-align: justify attribute. To make the last line centered, I excluded it from the paragraph tag, which then returns to the attribute used in the div tag. You just need a strategic one about how many words you want on the last line. I included a demo from the violin. Hope this helps.

Demo Center Indicates paragraph text

Answer 6

None of this worked for me. I just want to focus the first two lines in this paragraph, but CENTER does not work, but CENTER, DIV, SPAN, etc. All “break” paragraphs (ie. Background formatting goes to h ***).

 <style type="text/css"> <!-- .blurow {color:blue;} --> </style> <span class="blurow"> <b>Tri-League Majors Division Tournament!</b><br> <br> <div style="padding:0 40px 0 40px;"> <p style="font-size: 0.85em; text-align:justify; padding:20px 40px 20px 40px; background-color:#dfc;"> Phillies over the Marlins!<br> Congratulations, Coach Princiotto, on a great season.<br> <br> And many thanks to Coaches Charnetski, Clark, Hill, Juan, Lewis, Lomozik, Mowchin and Princiotto for all the hard work and time you folks poured into Little League this year. The impressions you leave make a difference for a lifetime and they are appreciated more than we can say. </p> </div> <br> </span> 

The main background begins as light yellow. The DIV tag sets the outer border for the P tag, which rotates by setting the area of ​​a different background color for the paragraph; those. layered effect.

Most of the text should be justified, so the alignment of the text was set as an excuse for the P tag. But the first two lines of the text should be focused. Unfortunately, the CENTER tag was screwed and, while it used to work, now it just “breaks” the paragraph and the entire text of the text goes beyond the paragraph (i.e., outside the desired background color area). An insult to injury, the centering in effect for this part of the page, leads and centers the entire text (how can we say that the paragraph was “broken”.

So, I was stuck without the ability to focus these two lines! Anyone have any ideas that don't include 200 lines of curved CSS coding?

Answer 7

Calculate the length of the text line and create a block with the same size as a line of text. Center the block. If you have two lines, you will need two blocks if they have different lengths. You can use the span tag and br tag if you don't need extra spaces from blocks. You can also use a preliminary tag to format inside the block.

And you can do this: "Aligning the text: center;" style =

For vertical see http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Here is the best way for block layouts and web pages, go here and explore the flexible new standard that started in 2009. http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#justify-content-property

W3schools also has many examples of flexibility.

Answer 8

Solution (not the best, but still working in some cases) for non-dynamic text with a fixed width . It is used for situations where there is little room for "stretching" the text to the end of the penultimate line. Make some characters at the end of the paragraph (experiment with their length) and hide it; apply an absolute position to the paragraph or just correct the indented / margin free space.

A good way to compabitity / crossbrowser is to center the text.

Example (paragraph to):

 .paragraph { width:455px; text-align:justify; } .center{ display:block; text-align:center; margin-top:-17px; } 

 <div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,<br><center>vel scelerisque nisl consectetur et.</center></div> 

And after the correction:

 .paragraph { width:455px; text-align:justify; position:relative; } .center{ display:block; text-align:center; margin-top:-17px; } .paragraph b{ opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; } 

 <div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <b>__</b><br><div class="center">vel scelerisque nisl consectetur et.</div></div> 

Answer 9

Simple Text-align: justify; (to align the elements) Padding-left :? Px (to center the elements)

Answer 10

Most solutions do not take into account any responsive text block.

The amount of text in the last line of the paragraph is determined by the size of the browser of viewers, so it becomes very difficult.

I think, in short, if you want some kind of reaction of the browser / mobile device, this is impossible :(