居中对齐</p> <div> </div>中的<p>

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>的大小。

我已经将div的height设置为我想要的，但是line-height中有<p>有优势和劣势。优点是数字最终显示在中间。缺点是当我删除号码（它是空的<div>）时，{{1}}的高度会缩小。

我如何实现目标？

编辑： 我用min-height修复了这个问题。我现在的问题是，div的内容不会出现在中间，而是像这样切割：

为什么会这样？这非常奇怪，因为jsfiddle正确显示它。

适用于所有浏览器。

Answer 1

请参阅演示文稿的小提琴，如果删除值，则div不会缩小。

小提琴：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/