css - CSS：使用文本对齐：跨度居中

Question

对于日历应用程序，我希望以熟悉的月份名称为中心，左边距的左箭头返回一个月，右边距的右箭头向前一个月。就像是< May >

<Div>s 在末尾插入换行符，所以我想我会使用 span 除了 span 是一个内联元素，因此该text-align: center属性仅在月份的长度内对齐它。只是使用text-align: center会产生类似的东西<May >

为了弥补这一点，我display: block在跨度中添加了，但是，这会在末尾创建一个换行符，即

<     May
              >

谁能建议一个正确的方法来做到这一点？

最后一个版本：

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>

score 4 · Accepted Answer

您需要将 text-align 应用于容器元素，然后删除display:block（text-align 适用于 inline/inline-block 元素）。并且不要忘记在容器之后清除浮动。

score 1 · Accepted Answer

设计日历标题的一种方法可能如下。在我的示例（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>

2 回答 2