html - 如何在 h1 标签内水平居中 span 元素？

Question

我目前有这个标记:

<h1 class="title" id="page-title">
    <span id="page-title-inner">Home</span>
</h1>

还有这个 CSS:

h1#page-title { 
    background: transparent url(../images/line.png) 0px 6px no-repeat;
    overflow: hidden;
}

#page-title-inner { 
    width: auto; 
    float: left; 
    background: #fff; 
    padding: 0 15px; 
    position: relative; 
    left: 45%; 
}

考虑到页面标题很短，此 CSS 稍微完成了我想要的。但如果标题很长，它会从中间向右填充空间。

我真正想要实现的是将包裹在 span(在 h1 标签内)内的页面标题居中，而不管其宽度如何。

我试过做这样的事情:

#page-title-inner { 
    width: auto; 
    float: left; 
    background: #fff; 
    margin: 0 auto;
    display: block;
}

其中 margin 0 auto 值是将跨度居中的值，但我想知道为什么它不起作用。

是否有更好的方法和更高效的方法来实现我想做的事情？

Answer 1

删除 span 的 float:left 和 left:45% 属性，使其居中。同时为您的 H1 标签设置 text-align:center。