title: text-align justify, cannot override
body: <p>I have some text with <code>text-align: justify;</code> the property is inherited in links and other nested inline elements in that text. I want to set other text-align mode to some of them, for example <code>text-align: center;</code>, but I cannot. Firebug shows that the parent style is overridden, but the nested inline element is still justified. I observed that strange behavior in many different browsers and obviously they are doing this by spec? Is that really by design? How to work around it?</p>
  
  <p>EDIT: Some example code. The span with ID=span1 cannot define its own text align. It should be right aligned, but it is centered instead. While I was experimenting I noticed that inline elements cannot define any text alignment at all. Very strange.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  #cubic { width: 495px; height: 200px; background-color: green; text-align: center}
  #span1 {text-align: right; color: red}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p id="cubic"&gt;
  &lt;span id="span1"&gt;This is span 1&lt;/span&gt;
  &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>