Question

I’m using the technique in Stack Overflow question CSS centering text between two images but am unable to make the text center.

I would like the text “0 of 0” centered in this markup (as a fiddle):

HTML:

<div id="invoiceImageContainer">
    <img src="http://i.imgur.com/8QT8u.png" id="invoiceImage">
    <div id="invoiceNav">
        <img title="Next" src="http://i.imgur.com/oZb7r.png" id="nextInvoice">
        <img title="Previous" src="http://i.imgur.com/aKi11.png" id="prevInvoice">
        <span id="invoiceCount">0 of 0</span>
    </div>
</div>

CSS:

#invoiceImageContainer{
    width:420px;
    margin: 0 auto;
}
#invoiceImage {
    height:600px;
}
#invoiceNav {
    color:black;
    font-size:10pt;
}
#prevInvoice {
    float:left;
    padding-left:100px;
}
#nextInvoice {
    float:right;
    padding-right:100px;
}
#invoiceCount {
    text-align:center;
}

What am I doing wrong?

Answer 1

You are using a span for the text container which is an inline element. Therefore its width is the same as the width required for its content, changing it to a p (or changing display to block) will allow for horizontal centering. If you want to center vertically then set the line-height equal to the height of the images and set vertical-align: middle.

Updated fiddle: http://jsfiddle.net/W5jQd/3/.