CSS Text-Align Center 不起作用的元素出现在彼此下方

Question

嘿，所以我有一个包含 3 个链接的 div，这些链接有一个背景 url 图像，使它们显示为图像

这是我的 CSS 类

    /* calculate button */
.fc-calculate {text-align: center; padding: 12px 0; display: }

.fc-calculate-button {margin: 0 auto; width:200px;}

.fc-calculate-button a {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; float: left; padding-right: 30px;}
.fc-calculate-button a span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}

并标记如下

    <div class="fc-calculate">
    <div class="fc-calculate-button">
      <sc:link field="Link One" cssClass="">
        <span class="btnspan">
          <sc:text select="." field="Link One Text" />
        </span>
      </sc:link>
    </div>
    <!-- /fc-calculate-button -->


    <div class="fc-calculate-button">
      <sc:link field="Link Two" cssClass="">
        <span class="btnspan">
          <sc:text select="." field="Link Two Text" />
        </span>
      </sc:link>
    </div>
    <!-- /fc-calculate-button -->
</div>

问题是，链接不是并排出现并居中，而是出现在彼此下方

Answer 1

你正在 float 你的 anchor 和你的跨度而不是你的 .fc-calculate-button 类，如果你想并排显示两个容器并将它们放在容器的中心试试这个:

CSS

.fc-calculate {
    text-align:center;
}

.fc-calculate-button {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
}