Center-Ausrichtung <p> <div>

Habe ich Folgendes CSS:

#slot {
    width: 70px;
    height: 25px;
    line-height: 25px;
    border: 2px solid black;
    background-color: #00ffee;
    padding: 1px;
    overflow: hidden;
}

#element {
    text-align: center;
}

Und HTML:

<div id="slot">
    <p id="element">100 </p>
</div>

Möchte ich die <div> zu sein, von fester Größe, und die Zahl, die in <p> (nur zahlen werden eingefügt), ich möchte Sie haben zentriert rechts in die Mitte ohne änderung der Größe der größeren <div>.

Ich bereits den height des div, was ich haben will, aber mit line-height hat einen Vorteil und einen Nachteil. Der Vorteil ist, dass die Reihe endlich erscheint zentriert rechts in der Mitte. Der Nachteil ist, dass, wenn ich entfernen Sie die Nummer (es ist ein leerer <p>), die <div>'s Höhe schrumpft.

Wie kann ich mein Ziel erreichen?

BEARBEITEN:
Ich verwendet, min-height und, dass das Problem behoben wurde. Mein Problem ist jetzt, dass der Inhalt des div-erscheint nicht in der Mitte und ist geschnitten wie diese:

Warum ist das passiert? Das ist sehr komisch, weil jsfiddle zeigt es korrekt an.

Geschieht auf allen Browsern.

InformationsquelleAutor darksky | 2012-03-18