Carlos Carlos - 3 months ago 12
CSS Question

Text align inherit in css

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>


.multi{ width:500px; text-align:center; float:left }
</style>

</head>

<body>

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

</body>

Answer

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>