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;
   text-align: center;
}

HTML

<div class="centerAddress">
     <p style="margin-top: 5%">test</p>
     <p>testt</p>
     <p>test</p>
     <p>test</p>
     <p>test</p>
</div>

it will overide any other rule... text-align:left !important; — AthMav, Oct 02 '17 at 12:38
You shouldn't need that. Could you move your Code into a code snippet? Also in the given code your body does not have a center text align — SourceOverflow, Oct 02 '17 at 13:09
You are creating chaos in the edit reviews by editing the name and address on every posted answer. Is this really the address of a real person? Please consider such things _before_ posting the question. — Lundin, Oct 02 '17 at 14:27
Lundin that was my bad! I have to update and edit now as it was personal info. — , Oct 02 '17 at 14:31
Since you don't have enough rep yet, every such edit suggestion you leave pops up in an edit review where other users thinks the edit looks fishy - they don't see the full context. That's why your first edit got rejected. I'll fix this for you, please stop editing the answers for now. — Lundin, Oct 02 '17 at 14:33
I have updated my question, so I shouldnt have to edit any new post anyway. there is only two answer with personal detail. — , Oct 02 '17 at 14:34

score 1 · Answer 1 · answered Oct 02 '17 at 12:35

1

Make that

.centerAddress p {
  text-align: left;
}

to be effective on the p tags in there, which otherwise might inherit the centering from body

answered Oct 02 '17 at 12:35

Johannes

64,305
18
73
130

score 1 · Answer 2 · edited Oct 02 '17 at 14:35

1

Please remove the body alignments. Use two classes in css

html,
body {
   margin:0 auto;
   padding: 0;
   max-width: 960px;
   height: 100%;
   background-color: white;
   border: 1px solid #ddd;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}

in Html use these classes wherever you want. Like this,

<body>
    <h1 class="text-center">Body Header</h1>
    <div class="centerAddress text-left">
        <p style="margin-top: 5%">test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
   </div>
</body>

edited Oct 02 '17 at 14:35

Lundin

195,001
40
254
396

answered Oct 02 '17 at 12:48

Ashraful Karim Miraz

725
5
8

Yeah i know this way, but if I do that now there is alot of updating to my code. as the website is near done. – Oct 02 '17 at 12:54

KalyanLahkar · Accepted Answer · 2017-10-02T12:40:00.803

0

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;
}

edited Oct 02 '17 at 12:40

answered Oct 02 '17 at 12:37

KalyanLahkar

835
8
21

Thanks thats what I needed :) – Oct 02 '17 at 12:38

score 0 · Answer 4 · edited Oct 02 '17 at 12:46

This should be the solution, let me know if this helps you

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

html,
body {
  padding: 0;
  max-width: 960px;
  height: 100%;
  background-color: white;
}

body.center {
  text-align: center;
}

<body class="center">
  <div class="centerAddress">
    <p style="margin-top: 5%">test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

Ignore body's text-alignment

4 Answers4