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

Question

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

这是一个标记，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

Answer 2

text-align:center 不适用于居中块元素，仅适用于内联元素。考虑到您正在使用 Twitter Bootstrap，您可以通过以下 2 种方法来执行此操作：

选项 1 - 使用 span4s 然后将链接显示为具有固定宽度和边距的块：0 auto

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

a.share-icon {
    height:64px;
    display: block;
    width:64px;
    margin: 0 auto;
    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; }

选项 2 - 将图片放在链接中，然后让它们全部内联显示并使用 text-align:center

<div class="container">
    <div class="row" style="border:1px solid red; text-align:center;">
        <div class="span12">
            <a href="" class="share-icon facebook" title="Share on facebook">
              <img src="http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg" alt="" />
            </a>
            <a href="" class="share-icon twitter" title="Share on twitter">
              <img src="http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg" alt="" />
            </a>
            <a href="" class="share-icon email" title="Share in an email">
              <img src="http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg" alt="" />
            </a>
        </div>
    </div>
</div>

更新：我很抱歉，我没有像我应该说的那样清楚，附上我想要的最终结果，我正在尝试在 320px 宽度视图（移动）中完成此操作，谢谢。