Как горизонтально центрировать элемент span внутри тега h1?

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 & left:45% property of span, чтобы сделать его центром. Также установите text-align:center для вашего тега H1.

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

Float слева делает его , ну, плавайте влево. И процент для левого никогда не будет работать, потому что содержание пролете может быть различных размеров

---

Вы на самом деле не нужно, чтобы дать пролете идентификатор, вы можете просто сделать это:

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