尝试在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-align：center不适用于居中的图块元素，仅适用于嵌入式元素。 考虑到您正在使用Twitter Bootstrap，可以通过以下两种方法执行此操作：

选项1-使用span4s，然后将链接显示为具有固定宽度的块，并且margin：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; }

选项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宽度的视图（移动设备）中完成此操作，谢谢。

Answer 2

或者，您可以使用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