我目前有这个标记:
<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 值是将跨度居中的值,但我想知道为什么它不起作用。
是否有更好的方法和更高效的方法来实现我想做的事情?
最佳答案
删除 span 的 float:left
和 left:45%
属性,使其居中。同时为您的 H1 标签设置 text-align:center
。
关于html - 如何在 h1 标签内水平居中 span 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18954226/