html - フロート要素を考慮せずに要素の中央にテキストを配置する方法

Question

OK、このマークアップを取得しました

<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