How to align text without overriding

Question

I'm trying to align some text in HTML left, but I also want it to stay in the centre. When I align the text left, it overrides .

<center>
<b>
<BR>
<p style=color:orange;font-size:62px;text-align:left;"> If Bitcoin is now £0,<BR> and it was £0 when <BR>
I purchased, and I <BR> invested £0, the total <BR>
investment would be <BR>
worth £0, <BR>
The profit would be £0.</p>
</font>
</b>
</centre>

When text-align:left; is in there, the text aligns, but it also isn't in the centre anymore.
Any help would be appreciated!

EDIT: I want to align the text left, but it be in the centre of the page like this: like this:

*I'm trying to align some text in HTML left, but I also want it to stay in the centre* --> how you want both? — Temani Afif, Sep 08 '19 at 12:12
"Being on the left" and "being in the center" are mutually contradictory requirements. You can't have both. — Quentin, Sep 08 '19 at 12:13
Your text can either be on the left, or in the center. What exactly are you trying to achieve? — Maximilian Krause, Sep 08 '19 at 12:13
Note that ``, `` and (when used to fake a margin) `
` were superseded in **1996** by CSS (as was `` in the way you are using it too). — Quentin, Sep 08 '19 at 12:14
Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Progman, Sep 08 '19 at 12:36

score 2 · Answer 1 · answered Sep 08 '19 at 12:33

Try this: you can use a div (.wrapper) to keep the content in the center while you can align it wherever you want :)

.wrapper{
  width: 300px;
  margin: auto;
  background-color: red;
}

.wrapper{
text-align: left;
}

<div class="wrapper">
  <div>Aligned text</div>
</div>

score 0 · Answer 2 · answered Sep 08 '19 at 12:38

Well, you can specify a width for your paragraph, and set its margins left and right to be auto:

.center {
  width: 80%;
  margin:10px auto; /* So 10px for top/bottom, auto for left/right */
  color:orange;
  font-size:62px;
  text-align:left;
}

<b>
<br/>
<p class="center"> If Bitcoin is now £0,<br/> and it was £0 when <br/>
I purchased, and I <br/> invested £0, the total <br/>
investment would be <br/>
worth £0, <br/>
The profit would be £0.</p>
</b>

Side note: Your HTML code has a few syntax/formatting issues, like:

<center> tag closed as <centre> instead of <center> (well you shouldn't use this tag in the first place as it's not supported in HTML5).
For line breaks, it's <br/>, not <BR>.
Also, the <b> tag is deprecated nowadays, use <strong> or CSS instead.

How to align text without overriding

2 Answers2