How to have text aligned left but formated as if it was centered
Question
I have some text that I need aligned to the left but keep the same line formatting as if it were centered. Here is an example.
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<center>this text is line number one.
<br>this is line 2
<br>this is line number three</center>
<p>This is some text.</p>
</body>
</html>
This code gives you this output:
This is some text.
this text is line number one.
this is line 2
this is line number three
This is some text.
I want the text that is centered to be aligned left, but keep the formatting. ie: first line long, second line short and centered under first line, and have the first letter of the first line be all the way to the left. Sorry if this doesn't make sense. I dont know how else to explain it.
5 answers
solution1
2 ACCPTED 2015-09-04 15:31:05
You can float the paragraph to the left along with text-align:center; and then use a clearfix like this:
p.center-left { text-align:center; float:left; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }
<p>This is some text.</p> <p class="center-left">this text is line number one. <br>this is line 2 <br>this is line number three</p> <div class="clearfix"></div> <p>This is some text.</p>
solution2
2 2015-09-04 15:34:52
.centered { text-align : center; display : inline-block; } .left-aligned { /* no need to float : left in this case */ }
<p>This is some text.</p> <div class="left-aligned"> <div class="centered"> <div>this text is line number one.</div> <div>this is line 2</div> <div>this is line number three</div> </div> </div> <p>This is some text.</p>
I used two <div> , the parent one is made to make the text aligned to the left (no need for the css attribute float : left ), and the child one will have the two attributes, one to center the content text-align : center , and combined with display : inline-block , you have a smallest div possible in width because of the inline-block property.
solution3
0 2015-09-04 15:31:27
I'm not 100% sure what you mean, but tell me if this is the result you want?
HTML:
<body>
<p>This is some text.</p>
<div class="center">this text is line number one.
<br>this is line 2
<br>this is line number three</div>
<p>This is some text.</p>
</body>
CSS:
.center
{
width: 50%;
margin:auto;
}
Fiddle:
solution4
0 2015-09-04 15:31:58
div.centered { border: 1px solid red; text-align: center; display: inline-block; }
<!DOCTYPE html> <html> <body> <div> <p>This is some text.</p> <div class="centered"> this text is line number one. <br>this is line 2 <br>this is line number three </div> <p>This is some text.</p> </div> </body> </html>
solution5
-2 2015-09-04 15:32:44
Put your text in a div with display: inline-block, and then center the text
HTML:
<!DOCTYPE html>
<html>
<body>
<div style="display: inline-block">
<p>This is some text.</p>
<p>this text is line number one.</p>
<p style="text-align: center">this is line 2</p>
<p style="text-align: center">this is line number three</p>
<p>This is some text.</p>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.