text in verschachtelte boxen zentrieren - wie`? :)

hallo, ich habe zwei boxen als css definition:

<style type="text/css">

#outer-box {
   background-color: red;
   width: 300px;
   height: 300px;
   padding: 50px;
}

#inner-box {
   background-color: yellow;
   width: 200px;
   height: 200px;
   border: 50px solid black;
}

</style>

die ich verschachtelt in der webseite anzeige:

<body>

      <div id="outer-box">
         <div id="inner-box">
		 A
         </div>
      </div>

</body>

mein problem ist nun, dass ich es nicht hinbekomme, das A zentriert anzuzeigen.
ich habe schon sehr viel rumprobiert, mit formaten ala

.test  { text-align:center;vertical-align:middle; }

im inneren div, im äußeren div, in beiden divs ... mit einem extra div ums a ...
etc
aber das tut nicht das, was es soll. weiß jemand rat?

TheChrissy

Hallo,

also habe mich jetzt auch nochmal damit beschäftigt, weil es mich auch ein bisschen verwundert hat. Ich habe eine Lösung gefunden, weiß aber nicht ob das die optimale Lösung für dich ist.

Den Buchstaben habe ich nochmal in ein Div gepackt:

<div class="test">A</div>

und CSS:

.test{
    line-height: 200px;
    text-align: center;
}

Damit wird die Höhe der Zeile definiert. Also müsste je nach Größe deines Quadrats angepasst werden.

Hoffe ich konnte dir helfen.

Lg Christopher

das sieht gut aus, line-height zu nehmen, da wär ich nie drauf gekommen.
vielen dank für deine mühe.

schade,
zentrieren tuts zwar, aber man kann es leider nicht in der größe ändern.
also die boxen mit der schrift.