CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 3

How to have text aligned left but formated as if it was centered

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.

Upvotes: 0

Views: 81

Answers (5)

Trung Nguyen
Trung Nguyen

Reputation: 529

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>

Upvotes: 0

APAD1
APAD1

Reputation: 13666

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>

Upvotes: 2

Anwar
Anwar

Reputation: 4246

.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.

Upvotes: 2

Jacob Petersen
Jacob Petersen

Reputation: 1453

Put your text in a div with display: inline-block, and then center the text

Here is a codepen

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>

Upvotes: -2

Jesse
Jesse

Reputation: 1262

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:

https://jsfiddle.net/u2geno6u/

Upvotes: 0

Related Questions