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;

小提琴：https://jsfiddle.net/6c17ajqa/6/

Answer 2

您需要将此容器设为中心。

  .social-container {
      width: 400px;
      position: absolute;
      z-index: 6;
      margin: 0 auto;
      left:50%;
      top: 60%;
      transform:translate(-50%, -50%)
    }

按照小提琴https://jsfiddle.net/jb7f2mwy/

的链接

页脚内容对齐

2 个答案: