html - 试图在 twitter bootstrap 2.3.2 行/跨度中对齐三个图像

Question

我正在尝试对齐所有三个图像，使它们均匀地居中。

这是标记的 fiddle ，http://jsfiddle.net/bkmorse/btCRk

<div class="container"
    <div class="row" style="border:1px solid red;">
        <div class="span12">
            <a href="" class="share-icon facebook" title="Share on facebook">share on facebook</a>
            <a href="" class="share-icon twitter" title="Share on twitter">share on twitter</a>
            <a href="" class="share-icon email" title="Share in an email">send an email</a>
        </div>
    </div>
</div>

a.share-icon {
    height:64px;
    display: inline-block;
    width:64px;
    text-decoration: none;
    text-indent: -10000px;
    font-size: 0px;
    line-height: 0px;
}

a.share-icon.facebook {
    background: #fff url('http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg') no-repeat;
}
a.share-icon.twitter {
    background: #fff url('http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg') no-repeat;
}
a.share-icon.email {
    background: #fff url('http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg') no-repeat;
}

我试过 text-align:center;我试过向左/向右拉。我没有任何运气。感谢您的帮助。

谢谢!

Answer 1

或者，您可以使用 text-center 类..

<div class="container">
    <div class="row" style="border:1px solid red;">
        <div class="span12 text-center">
            <a href="" class="share-icon facebook" title="Share on facebook">share on facebook</a>
            <a href="" class="share-icon twitter" title="Share on twitter">share on twitter</a>
            <a href="" class="share-icon email" title="Share in an email">send an email</a>
        </div>
    </div>
</div>

演示: http://bootply.com/70873