Question

我正在制作的wordpress主题上有一些社交图标，我正在尝试添加选择使用哪些图标的功能。问题是，当我删除图标时，它会自动弄乱对齐，因为我在第一个图标上使用偏移量，在另一个图标上使用额外的类。现在我想出了解决这个问题的方法（尽管还没有工作），但是经过努力，我意识到用一个巨大的PHP函数来掩盖糟糕的css以帮助我处理有问题的CSS有点荒谬。这种方法可以在这里看到：https://wordpress.stackexchange.com/questions/126611/cannot-seem-to-get-a-value-or-key-from-array

所以我想知道是否有人可以帮助我修复我的社交图标，这样如果我删除它们就不会将它们的对齐方式从中心移开。所以它总是看起来居中，甚至。这是一个JS小提琴图标：http://jsfiddle.net/g2SC4/

以下是HTML的介绍。总共有6个图标：

<!-- start: social icon -->
<div id="social-icons">
<div class="section-wrapper section-icon social-icon">
    <div class="container">
        <div class="row">

            <div class="social-icon-phone clear-phone">
                <div class="span1 offset3">
                    <div class="flip-container">
                      <div class="flipper">
                        <div class="front">
                          <div class="flip-a">
                            <a href="#"><i class="icon-facebook icon-2x"></i></a>
                          </div>
                        </div>
                        <div class="back">
                          <div class="flip-b facebook">
                            <a href="#"><span class="icon-back"><i class="icon-facebook icon-2x"></i></span></a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>              

                <div class="span1">
                    <div class="flip-container">
                      <div class="flipper">
                        <div class="front ">
                          <div class="flip-a">
                            <a href="#"><i class="icon-twitter icon-2x"></i></a>
                          </div>
                        </div>
                        <div class="back">
                          <div class="flip-b twitter">
                            <a href="#"><span class="icon-back"><i class="icon-twitter icon-2x"></i></span></a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>  

                <div class="span1">
                    <div class="flip-container">
                      <div class="flipper">
                        <div class="front ">
                          <div class="flip-a">
                            <a href="#"><i class="icon-google-plus icon-2x"></i></a>
                          </div>
                        </div>
                        <div class="back">
                          <div class="flip-b google">
                            <a href="#"><span class="icon-back"><i class="icon-google-plus icon-2x"></i></span></a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>                  
            </div>

            <div class="social-icon-phone clear-phone">
                <div class="span1">
                    <div class="flip-container">
                      <div class="flipper">
                        <div class="front ">
                          <div class="flip-a">
                            <a href="#"><i class="icon-github icon-2x"></i></a>
                          </div>
                        </div>
                        <div class="back">
                          <div class="flip-b github">
                            <a href="#"><span class="icon-back"><i class="icon-github icon-2x"></i></span></a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>  

                <div class="span1">
                    <div class="flip-container">
                      <div class="flipper">
                        <div class="front ">
                          <div class="flip-a">
                            <a href="#"><i class="icon-pinterest icon-2x"></i></a>
                          </div>
                        </div>
                        <div class="back">
                          <div class="flip-b pinterest">
                            <a href="#"><span class="icon-back"><i class="icon-pinterest icon-2x"></i></span></a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>                  

                <div class="span1">
                    <div class="flip-container">
                      <div class="flipper">
                        <div class="front ">
                          <div class="flip-a">
                            <a href="#"><i class="icon-linkedin icon-2x"></i></a>
                          </div>
                        </div>
                        <div class="back">
                          <div class="flip-b linkedin">
                            <a href="#"><span class="icon-back"><i class="icon-linkedin icon-2x"></i></span></a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>  
            </div>
        </div>          
    </div>
</div><!-- end: social icon -->
</div>

Answer 1

这是解决方案。

从第一个图标（span）和以下CSS中删除类offset3：

.social-icon-phone.clear-phone {
    display: inline-block;
}

#social-icons .row {
    text-align: center; // remove margin left -30px
}

删除一些时，保持div（社交图标）居中

1 个答案: