1

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

这是标记的小提琴，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; 我试过拉左/右。我没有运气。任何帮助表示赞赏。

谢谢！

4

2 回答 2

0

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 宽度视图（移动）中完成此操作，谢谢。在此处输入图像描述

于 2013-07-31T14:43:07.117 回答
0

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

于 2013-07-31T14:57:16.680 回答