Text align inheritance in CSS

Question

I have a HTML structure which contains div and some CSS rules. I want to know that why text-align:centre is inherit to its child div and why is only text-align:centre is inherit

.multi {
  width: 500px;
  text-align: center;
  float: left
}

<div class="multi">
  <div class="rr">Abc</div>
</div>

Answer 1

In CSS, some properties are naturally inherited, by default. text-align is one of these, along with font, color, and others. Here is a rather small (but mostly robust) list of properties which will be, and will not be, inherited by children.

What you'll have to do in this case is something like this:

<style>
.multi {
    width: 500px;
    text-align: center;
    float: left;
}
.multi .rr {
    text-align: left; /* Or whatever value multi's parent has */
}
</style>