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.
CSS: using text-align: center in span
-
21-04-2022 - |
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>
Solution
OTHER TIPS
One way to design your calendar header could be the following. In my example (this fiddle), I used an asterisk instead of an image. I replaced the month span for a paragraph and changed the order of your markup.
Asterisks or images will be kept at the sides and the month in the middle in a flexible design. See this fiddle.
#header {
background:#e0e0e0;
}
span.previous {
float:left;
}
span.next {
float:right;
}
p.month {
text-align:center;
}
<div id="header">
<span class="previous">**</span>
<span class="next">**</span>
<p class = "month">May</p>
</div>