Html 尝试在twitter bootstrap 2.3.2行/span中对齐三个图像

我试图将所有三个图像对齐，使它们均匀地居中

这是一堆标记

---

文本对齐：居中不适用于居中块元素，仅适用于内联元素。考虑到您正在使用Twitter引导，以下是两种方法：

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

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

a、 共享图标{
高度：64px；
显示：块；
宽度：64px；
保证金：0自动；
文字装饰：无；
文本缩进：-10000px；
字体大小：0px；
线条高度：0px；}
a、 share-icon.facebook{背景：#fff url（'http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg“）不重复；}
a、 share-icon.twitter{背景：#fff url（'http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg“）不重复；}
a、 share-icon.email{背景：#fff url（'http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg“）不重复；}

选项2-将图像放在链接内，然后将它们全部显示为内联，并使用文本对齐：居中

<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的宽度视图（移动）中实现这一点，谢谢

或者，您可以使用

文本中心

类

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

---

演示：

另一种方法是使用列表。将链接和图像放入列表元素中，然后将li向左浮动，并在ul上设置display:table and margin:0 auto。你需要清除ul上的li。我不确定我是否理解你的意思，或者你为什么编辑我的答案而不是评论！如果您使用的是Twitter引导，那么按照我的回答中的建议，连续使用3个span4 div可以实现这一点。text align:center for.span12应该可以实现这一点，请参阅此更新版本