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略微完成了我想要的页面标题很短的内容。但如果标题很长，则会从中心向右填充空间。

我真正想要实现的是将页面标题置于跨度内（在h1标签内），无论其宽度如何。

我试过做类似的事情：

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

其中，边距0自动值是跨度的中心，但我想知道为什么它不起作用。

有没有更好的方法，更有效地实现我想做的事情？

Answer 1

删除float:left＆amp; span的left:45%属性使其成为中心。同时为H1标签设置text-align:center。

Answer 2

除非你对跨度做一些特别的事情，否则你不需要它：

<h1 class="title" id="page-title">
    Home
</h1>
h1#page-title { 
    background: transparent url(../images/line.png) 0px 6px no-repeat;
    overflow: hidden;
    text-align: center;
}

如果您确实需要对跨度执行某些操作：

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

向左浮动使它好了，向左漂浮。并且左边的百分比将永远不会起作用，因为跨度的内容可以是各种大小

您实际上不需要为跨度提供ID，您可以这样做：

h1#page-title span{ /* ... */ }

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

2 个答案: