html - 将内联 block div 与 float 在其左侧的另一个 div 居中对齐

Question

我正在构建一个页脚，它有 3 个部分:一个向左浮动的 Logo 、一个居中的导航栏和一组向右浮动的社交图标。每当我向左浮动 Logo 时，导航栏中的列表都会无缘无故地向右推。 ul 本身以页面为中心，并且 lis 上没有填充/边距，因此没有理由将它们推到一边。这是我的代码和一些屏幕截图。

HTML

        <p class="copyright footerLogo">
        OUR COMPANY LOGO</p>

        <div class="footerNavbar">


          <ul>
            <li><a href="default.asp">Services</a></li>
            <li><a href="news.asp">Client Work</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">Hire Us</a></li>
          </ul>

        </div>

        <div class="socialIcons">
            <ul>
                <li>
                    <a href="http://facebook.com">
                        <i class="fa fa-facebook-official fa-2x"></i>
                    </a>
                </li>
                <li>
                    <a href="http://twitter.com">
                        <i class="fa fa-twitter-square fa-2x"></i>
                    </a>
                </li>
                <li>
                    <a href="http://linkedin.com">
                        <i class="fa fa-linkedin-square fa-2x"></i>
                    </a>
                </li>
            </ul>
        </div>
</footer>

CSS

footer {
  text-align: center;
  height: 5em;
  background: transparent; }

footer .footerLogo {
  float: left;
  padding-left: 2em;
  padding-top: 1em; }

footer .footerNavbar {
  width: 60%;
  margin: 0 auto; }

footer .footerNavbar ul {
  padding: 0; }

footer .footerNavbar ul li {
  text-align: center;
  display: inline-block; }

footer .socialIcons {
  float: right;
  padding-right: 2em; }

footer .socialIcons ul li {
  display: inline-block; }

ul 居中:

当 float left 关闭时，lis 居中:

Answer 1

这可能是您的一个开始。这是你想要的吗？

我稍微清理了代码并临时为每个页脚子项添加了背景颜色(这样做时更容易看出问题所在)

footer {
  height: 5em;
}

footer .footerLogo {
  float: left;
  width: 20%;
  background-color: red;
}

footer .footerNavbar {
  float: left;
  width: 60%;
  text-align: center;
  background-color: lime;
}

footer .footerNavbar ul {
  padding: 0;
}

footer .footerNavbar ul li {
  text-align: center;
  display: inline-block; }

footer .socialIcons {
  float: left;
  width: 20%;
  text-align: center;
  background-color: yellow;
}

footer .socialIcons ul li {
  display: inline-block;
}

<footer>
       <div class="copyright footerLogo">
        OUR COMPANY LOGO</div>

        <div class="footerNavbar">


          <ul>
            <li><a href="default.asp">Services</a></li>
            <li><a href="news.asp">Client Work</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">Hire Us</a></li>
          </ul>

        </div>

        <div class="socialIcons">
            <ul>
                <li>
                    <a href="http://facebook.com">
                        <i class="fa fa-facebook-official fa-2x">1</i>
                    </a>
                </li>
                <li>
                    <a href="http://twitter.com">
                        <i class="fa fa-twitter-square fa-2x">2</i>
                    </a>
                </li>
                <li>
                    <a href="http://linkedin.com">
                        <i class="fa fa-linkedin-square fa-2x">3</i>
                    </a>
                </li>
            </ul>
        </div>
</footer>