Выровнять по центру <p>in <div>

Question

У меня есть следующий CSS:

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

#element {
    text-align: center;
}

И HTML:

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

Я бы хотел, чтобы <div> имел фиксированный размер, и любое число в <p> (там будут вставлены только цифры), я бы хотел, чтобы они были в центре прямо посередине, не меняя размер большего <div>.

Я уже установил height элемента div в значение whatЯ хочу, но наличие line-height имеет свои преимущества и недостатки.Преимущество состоит в том, что число, наконец, появляется в центре прямо посередине.Недостатком является то, что когда я удаляю число (это пустое <p>), высота <div> уменьшается.

Как мне достичь своей цели?

РЕДАКТИРОВАТЬ: я использовалминимальная высота, и это решило проблему.Моя проблема сейчас заключается в том, что содержимое div не появляется в середине и обрезается так:

Почему это происходит?Это очень странно, потому что jsfiddle показывает это правильно.

Бывает во всех браузерах .

Answer 1

См. Скрипту для демонстрации, и если вы удалите значение, div не уменьшится.

Fiddle: http://jsfiddle.net/RFN2h/

Демо: http://jsfiddle.net/RFN2h/embedded/result/

Answer 2

Если CSS работает на JS Fiddle и не работает в браузерах, у вас, скорее всего, есть другой CSS из настроек браузера по умолчанию или на вашей странице, который мешает опубликованному вами CSS. Вы могли бы выяснить, что CSS переопределяется. Это легко сделать, скажем, с помощью Firebug или Chrome Web Developer. (переопределенный CSS вычеркнут).

Вероятно, браузер устанавливает отступы по умолчанию или поля для абзацев. Вы можете сбросить любой браузер CSS с любой из тактик, перечисленных на этой странице. http://www.cssreset.com/