CSS：在span中使用text-align:center

Question

对于一个日历应用，我希望拥有熟悉的外观，即月份名称居中并在左边距处放置左箭头以返回上个月，在右边距处放置右箭头以前进到下个月。例如：< 五月 >

元素在结尾处插入换行符，因此我认为可以使用，但是是内联元素，因此text-align:center属性只会将其对齐到月份长度内。仅使用text-align:center会产生类似<五月 >的结果。

为了弥补这一点，我在中添加了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>

- user1904273

---

当您想要将所有内容对齐到一行时，为什么需要使用 display: block;？ - Mr. Alien

因为否则text-align不起作用..middle示例。 - user1904273

可能是如何在CSS中居中一个span元素？的重复问题。 - underscore_d

Answer 1

你需要在容器元素上应用 text-align 属性，并移除 display:block 属性（text-align 对于行内/行内块元素有效）。还要记得在容器后清除浮动。 示例

- nice ass

---

这已经足够了，为什么要使用浮点数、清除和所有的东西 http://jsfiddle.net/C3Wxf/ - Mr. Alien

看起来OP想要一个全宽度布局，带有箭头在边缘，可能是这样的东西：链接 - nice ass

这个方法可行。我想我的原始问题的答案是：你只能在 div 中使用 text-align center，而不能在 span 中使用。顺便说一下，我尝试过使用 inline-block 并添加宽度，但也没有居中。 - user1904273

你可以在任何块级元素中对内联元素进行文本对齐，无论它们是什么类型的元素。 - nice ass

Answer 2

设计日历页眉的一种方式是以下这样。在我的例子中（this fiddle），我使用了一个星号，而不是图像。我用一个段落替换了月份跨度，并改变了您的标记顺序。

星号或图像将被保留在两侧，月份在中间以灵活的设计呈现。请参见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>

- Fico