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然后将链接显示为具有固定宽度和边距的块：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宽度视图（移动）中完成此任务，谢谢。 enter image description here

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

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

2 个答案: