答案 0 :(得分：2)
SPAN标记与其内容一样宽，因此将某些内容设置为居中没有任何意义。
改为使用DIV（块元素）。块元素与其容器一样宽。
<div style="text-align: center;"> Lorem </div>
一个好方法，为元素添加背景颜色或边框，您可以准确地看到它在布局中的位置。这非常适合调试这些类型的问题。
<div style="text-align: center;border:1px solid #ff0000"> Lorem </div>
答案 1 :(得分：1)
你不需要所有那些花哨的css规则和包装元素，一个简单的vertical-align就足够了。 (see here)
由于跨度是内联元素，因此它会折叠以适合内容，因此文本无法居中。你也不能使用块级元素，这会破坏你的布局。
您需要应用display:inline-block;并添加width或使用花车进行布局。