Nästlade divar

Jag vill ha den inre diven centrerad i den yttre diven, utan att övrig text och bilder blir centrerade.
Så här har jag skrivit, dock utan framgång:

div.yttre {
border-right : 2px solid #336600;
background-color : #ffffff;
color : #999999;
width : 600px;
}

div.inre {
border : 1px solid #660000;
background-color : #ffffff;
color : #999999;
text-align : left;
width : 300px;
}

<div class="yttre">
div text

<div class="inre" align="center">
annan text
</div>

mer text

</div>

Tacksam för lite hjälp och kommentarer. Vad gör jag för fel?

Jag är inte säker på om jag förstår vad du försöker uppnå, men jag svara iallafall.

div.yttre { 
border-right : 2px solid #336600; 
background-color : #ffffff; 
color : #999999; 
width : 600px;
text-align: center; 
} 

div.inre { 
border : 1px solid #660000; 
background-color : #ffffff; 
color : #999999; 
text-align : left; 
margin: 0px auto 0px auto;
width : 300px; 

} 

div.upper,div.lower {
  text-align: left;
}

<div class="yttre">

<div class="upper">
div text
</div>

<div class="inre">
annan text
</div>

<div class="lower">
mer text
</div>

</div>

Tack! Nu funkar det som jag vill. Men jag förstår inte hur. Vad betyder denna rad?:

margin: 0px auto 0px auto;

Det betyder att topp- och bottenmarginalerna ska vara noll, nedan vänster och höger sätts automatiskt.
Detta är det korrekta sättet att centrera en box. Tyvärr funkar det inte i Internet Explorer, så där får man istället sätta text-align:center i den omgivande boxen, och sedan sätta tillbaka text-alignen till left i vår box som vi vill centrera.
Den senare varianten fungerar inte i Mozilla, så man måste göra på bägge sätt.

Tack för ett uttömmande svar.