Search code examples
htmlalignmenttext-align

How to put a block of writing in HTML from text-align: right


The title is slightly wordy so I will try to provide an example of what is happening in my code and what I want to happen.

ONEDRIVE LINK OF ALL MY CODE

https://1drv.ms/u/s!AvauuVcN_DBAh30o-aOYmh2AMxL6?e=IL4csP

I typed randomly on my keyboard for placeholder text


What is happening in output

    Lorem Ipsum
daof esiogheagf difghea
fjaeiohrteg rearih
alfugeahoruij feioaryawrg
awirhyear rawirhy weri
fdsilryh ddfr

                                                                                             Lorem Ipsum
                     dioahef efyarw aspv9aru crupdjeamf zxpodruwa fopdurf sfjf fos rfps f idyrheajnr wafjhar

What I want to happen

    Lorem Ipsum
daof esiogheagf difghea
fjaeiohrteg rearih
alfugeahoruij feioaryawrg
awirhyear rawirhy weri
fdsilryh ddfr

                                                                                             Lorem Ipsum
                                                                                        saliaf saoie awsuor aswi
                                                                                              lary sfopea dpa fk
                                                                                         uwartyea fyisdr saor a
                                                                                           feaiory waro aorhf df

Information

<p style="text-align: right">Education Perfect</p>

I have tried doing style="width: -500px", didn't really seem to work...


Solution

  • Have you tried enclosing your text in a container div and then reducing it's width?

    <div class="container">
      <p>text</p>
      <p>more text</p>
    </div>
    

    And then:

    .container {
      float: right;
      width: your-desired-width;
    }
    
    .container p {
      text-align: center;
    }
    

    I can't give you an exact reproduction of the desired outcome since the HTML you posted is too vague, but that should do the trick.

    Edit: re-read the question and updated the CSS rules accordingly, let me know if there's anything missing or if I'm getting the wrong idea.