将 inline-block div 与浮动在其左侧的另一个 div 居中对齐答案

【问题标题】：Center align inline-block div with another div floated left of it将 inline-block div 与浮动在其左侧的另一个 div 居中对齐
【发布时间】：2016-01-22 04:36:32
【问题描述】：

我正在构建一个页脚，它有 3 个部分：一个向左浮动的徽标、一个居中的导航和一组向右浮动的社交图标。每当我将徽标向左浮动时，我的导航中的 lis 就会无缘无故地向右推。 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居中：

【问题讨论】：

我编辑它以显示编译后的代码

标签： html css

【解决方案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>

【讨论】：

向左浮动导航栏？绝对是我从未想过的，但正是我想要的。谢谢！

【解决方案2】：

创建一个包含所有 3 个元素的父 div。

左边的元素：

position:absolute;
left:0;

右边的元素：

position:absolute;
right:0;

相对于父div：

#parent {
position:relative;
}

【讨论】：

【解决方案3】：

请添加 jsfiddle 的链接，以便更容易为您提供帮助。
我认为你需要使用 css clear property

【讨论】：