响应式布局上的中心页脚小部件

Question

我在这里有一个 wordpress 3.9.2 网站：http://innerwestadv.com/dev/。我想让它在屏幕变小时时使页脚小部件居中。

HTML：

<div id="text-2" class="col-sm-4 widget widget_text">           <div class="textwidget"><a href="http://www.iwstrategies.biz/" title="IW Strategies" target="_blank"><img src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/IW_strategies_logo.png" alt="IW Strategies" class="alignleft size-full wp-image-137" height="90" width="360"></a>
<div style="margin-left:23px;">
IW Strategies provides the strategies necessary to achieve your goals. Whether it’s a successful result before a local government board or delivering your message in the court of public opinion, the methods of IW Strategies are tried and tested. Our results are tangible. Starting with a clearly identified goal, IW Strategies provides the roadmap to success and the tools required to get there smoothly.
</div></div>
        </div><div id="text-3" class="col-sm-4 widget widget_text">         <div class="textwidget"><a href="http://innerwestadv.com/dev/?page_id=12" title="Innerwest Advertising &amp; Public Relations"><img src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/IW_logo-ftr.png" alt="Innerwest Advertising &amp; Public Relations" class="alignleft size-full wp-image-136" height="160" width="360"></a><br>
<div style="margin-left:23px;">
170 S. Virginia Street, Suite 202<br>
Reno, Nevada 89501<br>
Fax: (775) 323-5572
</div></div>
        </div>      
<div id="recent-posts-2" class="col-sm-4 widget widget_recent_entries">     <h5>INNERTHOUGHTS RECENT POSTS</h5>     <ul>
                    <li>
                <a href="http://innerwestadv.com/dev/?p=425">5 Reasons Why Neglecting Your Website is Destroying Your Brand</a>
                            <span class="post-date">August 27, 2014</span>
                        </li>
                </ul>
        </div>

CSS：

.footer .widget {
    float: none;
    margin: 0 auto;
    max-width: 360px;
}

我已尝试将位置设置为相对，但我认为有其他问题。任何帮助将不胜感激。

Answer 1

如果我没记错的话，问题似乎是当窗口调整页脚小部件开始与页面的左边缘对齐时。通过 Inspector 编辑 CSS 我能够解决将 text-align:center; 添加到页脚行的问题：

.footer-sidebar{
  text-align:center;
}

您可以使用

恢复正确的文本对齐方式

.footer .widget{
  text-align: left;
}