Question

所以我有一个包含3个按钮的div，我希望这些按钮位于div的中心。

到目前为止我试过这个

.centerButtons  
{
    margin-left: auto;
    margin-right: auto;
    width: 90%;    
}

哪个中心包含按钮的div很好，但是这个div中的实际按钮没有居中..这是我到目前为止的标记..

<div class="clearfixLeft clearfix centerButtons">
  <xsl:if test="sc:fld('Link One', .)!=''">
    <div class="fl_left mr_7 mt_10">
      <div class="green-btn-solid">
        <sc:link field="Link One">
          <span class="btnspan">
            <sc:text select="." field="Link One Text" />
          </span>
        </sc:link>
      </div>
    </div>
  </xsl:if>
  ...
</div>

其他课程

/* link styles */
.green-btn-solid {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; padding-right: 30px; }
.green-btn-solid 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;}

Answer 1

您是否尝试过text-align：center;？我很确定它也适用于元素。

Answer 2

使用text-align

.centerButtons {
    text-align: center;
}

将使centerButtons类的所有内联子项居中

Answer 3

如果您的按钮是内联元素，则text-align类上的

centerButtons将起作用。如果您的按钮是块级元素，则需要定义它的宽度并使用margin: auto，就像使用centerButtons元素一样。

CSS如何将div中的链接元素居中

3 个答案: