如何在不考虑浮动元素的情况下将文本居中对齐

Question

好的，我得到了这个标记

<th class="ai1ec-weekday <?php if( $day['today'] ) echo 'ai1ec-today' ?>">
    <span class="ai1ec-weekday-date"><?php
    echo Ai1ec_Time_Utility::date_i18n( 'l', $date, true );
    ?> </span>
</th>

当跨度具有text-align: center时，它会生成以下输出

​

​

现在我想添加一个浮动在右边的按钮

<th class="ai1ec-weekday <?php if( $day['today'] ) echo 'ai1ec-today' ?>">
    <div class="btn-group pull-right">
        <button class="btn ai1ec-reveal-events"><?php _e( 'Reveal all events', AI1EC_PLUGIN_NAME ) ?></button> 
    </div>
    <span class="ai1ec-weekday-date"><?php
    echo Ai1ec_Time_Utility::date_i18n( 'l', $date, true );
    ?> </span>
</th>

这就是我得到的

​

​

我想要的是mondais仍然像以前一样居中，但我希望不使用绝对定位(当然，如果可能的话)。

CSS (我指的是不同于引导CSS )

.ai1ec-week-view th .ai1ec-weekday-date,
.ai1ec-oneday-view th .ai1ec-weekday-date {
  font-size: 10.5pt !important;
  font-weight: normal !important;
}
.ai1ec-week-view th .ai1ec-weekday-day {
  font-size: 9pt !important;
  font-weight: normal !important;
}
.ai1ec-month-view th, .ai1ec-oneday-view th {
    text-align: center !important;
}

Answer 1

请参阅此方法：http://jsbin.com/uxejes/1/edit

(仅在Fx18和Chrome上测试)

相关css

button {
  float: right; 
  margin-right: -100%;
  position: relative;
  left: -100%;
}

span {
  display: block;
  text-align: center;
}

按钮(带有position: relative)不会影响span元素中包含的文本的位置