0

我目前有这个标记：

<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;
}

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

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

4

2 回答 2

4

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

于 2013-09-23T07:53:59.060 回答
1

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

<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%; */
}

向左浮动使它，好吧，向左浮动。而left的百分比永远不会起作用，因为span的内容可以是各种大小

你实际上不需要给跨度一个ID，你可以简单地这样做：

h1#page-title span{ /* ... */ }
于 2013-09-23T07:58:35.573 回答