Html 如何在放置display:inline时将H1与边框居中？

好的，这是一个有趣的例子

我有一个出现在框中的

标题（我指的是屏幕上可见的框，如

边框：纯白3px

）。框本身以及框内的文本都需要有阴影。框不能是固定宽度，因为框内的文本会随着页面的变化而变化

这里的问题是：除了IE9，我让它工作得很好，在IE9中阴影只出现在方框上，而不是文本上

如果我从CSS中删除

display:inline

，那么它在IE9中正常工作，但是框是整个容器的宽度，而不是仅围绕文本。因此，我认为解决方案的关键在于找到一种更好的方法，将文本和框置于容器内部的中心，因此

display:inline可以删除

标记非常简单：

<style>
.container {
    width:500px;height:200px;padding:50px;background:#eee;
    text-align:center;
}

h1 {
    font-size:34px;
    color:white;
    padding:25px;
    border:solid 3px white;
    letter-spacing:7px;
    display:inline;

    box-shadow: 0 0 6px #666;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
    filter:glow(color=black, strength=1); /* IE9 stupid proprietary shadow */
}
</style>

<div class='container'>
    <h1>Testing</h1>
</div>


.集装箱{
宽度：500px；高度：200px；填充：50px；背景：#eee；
文本对齐：居中；
}
h1{
字体大小：34px；
颜色：白色；
填充：25px；
边框：3倍纯色白色；
字母间距：7px；
显示：内联；
盒影：0 0 6px#666；
文本阴影：0px 0px 8px rgba（0,0,0,0.8）；
过滤器：辉光（颜色=黑色，强度=1）；/*IE9阴影*/
}
测试

你可以在这里玩：

谢谢。
我在h1中添加了一个
margin
属性。这使得可以摆脱
display:inline仍然得到相同的结果，但较长的文本会跳转到另一行。有点像如果你有一个固定的宽度，我知道你不想要。无论如何，如果有帮助的话
谢谢——但不幸的是，根据设计师的说法，文本必须看起来与原始示例一样，框25px远离文本（因此h1上填充了25px）。这看起来很好，但我不能设置那个宽度。你知道一个不使用设定宽度将所有东西居中的技巧吗？不幸的是，我不知道。我尝试设置
width:inherit
甚至创建一个新div来包含h1，并将框阴影和边框传递给它，但仍然不起作用。这是一个艰难的问题，我投票通过了这个问题，希望你能找到比我更有经验的人。我有时是个混蛋。好运气谢谢你的尝试：-）我同意，我不敢相信我们已经达到了IE9，这仍然是一个巨大的痛苦！