Ignore body's text-alignment

Question

The HTML body is set to text-alignment = center. I know this is not the best approach and I may change in the future as this is giving me a lot of headaches, but my whole website was designed based on this, so I would not like to change this set up right now.

I would like to have a box centered middle, but everything inside that box set to left. at the moment everything inside that box is also set to center. even though the box elements are text-aligment= left.

CSS:

.centerAddress{

    width: 40vw;

    height: auto;

    text-align: left;

}



html,

body {

   margin:0 auto;

   padding: 0;

   max-width: 960px;

   height: 100%;

   background-color: white;

}

HTML

<div class="centerAddress">

     <p style="margin-top: 5%">test</p>

     <p>testt</p>

     <p>test</p>

     <p>test</p>

     <p>test</p>

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You can try using !important to trump css specificity

.centerAddress{
    width: 40vw;
    height: auto;
    text-align: left !important;
}

Refer here for more details

Or you can target all child elements inside the .centreAddress box by using the * selector

.centerAddress *  {
    text-align: left;
}

Ignore body's text-alignment

Sign up