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

时间:2013-01-21 11:41:18

标签: html css twitter-bootstrap

好的,我得到了这个标记

<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

enter image description here

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

<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>

这就是我得到的

enter image description here

我想要获得的是mondais仍然像以前一样居中,但我想在不使用绝对定位的情况下这样做(当然,如果可能的话)

CSS(我的意思是除了bootstrap 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;
}

1 个答案:

答案 0 :(得分: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元素中包含的文字的位置