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

Question

I currently have this markup:

<h1 class="title" id="page-title">
    <span id="page-title-inner">Home</span>
</h1>

And this 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%; 
}

This CSS slightly accomplishes what I want given that the page title is short. But if the title is quite long, it fills the space from the center to the right.

What I really want to achieve is to center the page title wrapped inside the span (which is inside the h1 tag) regardless of its width.

I have tried to do something like:

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

where the margin 0 auto value is what would center the span but I wonder why it doesn't work.

Is there a better way and more efficient to achieve what I want to do?

Answer 1

remove float:left & left:45% property of span to make it center. Also set text-align:center for your H1 tag.

Answer 2

Unless you do something special with the span, you dont need it:

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

---

if you do need to do something with the span:

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

Float left makes it, well, float left. And the percentage for the left will never work, because the content of the span can be various sizes

---

You actually dont need to give the span an ID, you can simple do this:

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