html - 页脚内容对齐

Question

我有一个正在为学校元素开发的网页。这是 jsfiddle。

https://jsfiddle.net/adamkerik/6c17ajqa/

<footer>
<div class="social-container">
    <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
    </ul>
</div>
<!--text-->
<h1>Follow Us</h1>
<div class="uzex">
<div class="vr"></div>
<ul>
<li><strong>Contact Us</strong></li>
<li>3678 Poe Road</li>
<li>Mount Pleasant, South Carolina 29464</li>
<li>843-216-9434</li>
</ul>
</div>
</footer>

问题是在页面的页脚上，我希望内容以按钮和列表中间的“div class va”为中心。我似乎无法让内容居中。谢谢你的帮助!

ps CSS 在 jsfiddle 页面中，因为我知道可能需要它

Answer 1

将此添加到您的页脚元素 CSS:

 margin: 0 auto;
 display: block;
 text-align:center;

fiddle :https://jsfiddle.net/6c17ajqa/6/