如何在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; 
} 

其中保證金0 auto值就是將中心的跨度，但我不知道爲什麼它不工作。

有沒有更好的方法，更有效地實現我想要做的事情？

Answer 1

刪除float:left & left:45% span使其成爲中心的屬性。還爲您的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{ /* ... */ }