CSS: using text-align: center in span

Question

For a calendar app, I want to have the familiar look of the month name centered with a left arrow at the left margin to go back a month and the right arrow at the right margin to go forward a month. Something like < May >

<Div>s insert line breaks at the end so I thought I would use span except span is an inline element so that the text-align: center property only aligns it within the length of the month. Just using text-align: center produces something like <May >

To compensate for this, I have added display: block in the span, however, this creates a line break at the end ie

<     May
              >

Can anyone suggest a proper way to do this?

Last version:

CSS/HTML:

span.previous {
     float:left;
}
span.next {
     float:right;    
}
span.month {
     display:block;
     text-align:center;
}

<span class="previous"><img src="leftarrow.gif"></span>
<span class = "month">May</span>
<span class="next"><img src="rightarrow.gif"></span>

Answer 1

You need to apply the text-align to the container element, and remove display:block (text-align works with inline/inline-block elements). And don't forget to clear the floats after the container.

fiddle