CODEWITHSUNDEEP
css
StevieB
StevieB

Reputation: 6533

CSS How to center link elements within a div

So I have a div which will contain 3 buttons and I want these buttons centered within the div.

I tried this so far

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

Which centers the div containing the buttons which is fine, but the actual buttons within this div are not centered..This is my mark up so far..

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

Additional Classes 

/* 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;}

Upvotes: 6

Views: 37638

Answers (3)

Logan Serman
Logan Serman

Reputation: 29870

text-align on the centerButtons class will work if your button is an inline element. If your button is a block-level element, you will need to define it's width and use margin: auto like you did with the centerButtons element.

Upvotes: 2

corvid
corvid

Reputation: 11187

Have you tried text-align: center;? I'm pretty sure it works on elements as well.

Upvotes: 11

calebds
calebds

Reputation: 26228

Use text-align

.centerButtons {
    text-align: center;
}

which will center all inline children of class centerButtons

Upvotes: 5

Related Questions