How do I get differing text alignments in the same div?

Question

I have made this div:

<div id="MyDiv"><h>HeaderText</h><br>

            DivText

</div>

I want to have the HeaderText centralised and the DivText aligned left. Because its within the div, the HeaderText CSS text-align: left; contradicts the div CSS.

I want it to be in there so it keeps the background formatting, position etc of the div.

Answer 1

You can wrap the DivText in another <div> . See below:

 #MyDiv { width: 100px; border: 1px solid black; } header { text-align: center; } div.inner{ text-align: left; } 

 <div id="MyDiv"> <header>HeaderText</header><br> <div class="inner">DivText</div> </div> 

Answer 2

This works fine. I'd suggest it's because you are using unknown tags <h> in your code

 h1 { text-align: center; } 

 <div id="MyDiv"> <h1>HeaderText</h1> DivText </div>