如何将两个对象居中对齐在同一条线上

Question

我正在尝试居中对齐我的页脚菜单项。我在页脚中有两个项目，一个版权和一个菜单。如何在中心对齐这两个项目，使它们彼此相邻？

我试图让页脚做什么

©网站名称|免责声明|隐私|广告|联系我们

jsfiddle - https://jsfiddle.net/22nqe73q/

.td-pb-span td-sub-footer-copy {
  text-align:center;
  display:inline-block;
}
.td-pb-span td-sub-footer-menu {
    text-align:center;
  display:inline-block;
}
.td-sub-footer-container td-container-wrap {
  text-align:center;
}

<div class="td-sub-footer-container td-container-wrap ">
        <div class="td-container">
            <div class="td-pb-row">
                <div class="td-pb-span td-sub-footer-menu">
                        <div class="menu-td-demo-footer-menu-container"><ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"><li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li>
<li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li>
<li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li>
<li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li>
</ul></div>                </div>

                <div class="td-pb-span td-sub-footer-copy">
                    © 2017 Site Name                </div>
            </div>
        </div>
    </div>

Answer 1

首先，看起来您的选择器有点偏离。

例如： .td-pb-span td-sub-footer-copy

但我认为你的意思是： .td-pb-span.td-sub-footer-copy

但问题的关键点。您需要将display: inline-block;应用于列表项。如下所示：

.menu-item { display: inline-block; }

Answer 2

不确定为什么你有这么多div嵌套，这是不需要的，你可能想要清理那些。

但是这里是解决方案，div是块级元素，你需要确保设置它显示：inline-block或者只是使用span。

ul剩下默认的40px填充，也需要覆盖它。

将ul li设置为内联块将使它们成为一行

垂直线可以通过border-right: 1px solid #000000;来实现，但请确保您拥有以下内容，以便最后一项最后没有该行。

ul li:last-child {
  border-right: none;
}

.td-pb-span td-sub-footer-copy {
  text-align: center;
  display: inline-block;
}

.td-pb-span td-sub-footer-menu {
  text-align: center;
  display: inline-block;
}

.td-sub-footer-container td-container-wrap {
  text-align: center;
}




.td-container {
  text-align: center;
}

.inline,
.inline * {
  display: inline;
}

.site-name {
  padding-right: 10px;
  border-right: 1px solid #000000;
}

.inline ul {
  padding: 0;
}

.inline ul li {
  padding-right: 10px;
  padding-left: 10px;
  border-right: 1px solid #000000;
}

.inline ul li:last-child {
  border-right: none;
}

<div class="td-sub-footer-container td-container-wrap ">
  <div class="td-container">
    <div class="td-pb-row">
      <span class="td-pb-span td-sub-footer-copy inline site-name">© 2017 Site Name</span>
      <div class="td-pb-span td-sub-footer-menu inline">
        <div class="menu-td-demo-footer-menu-container">
          <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu">
            <li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li>
            <li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li>
            <li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li>
            <li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

我访问了jsfiddle - https://jsfiddle.net/22nqe73q/。 我编辑了一些代码。请尝试这个。我编辑了一些CSS。我根据流程设置CSS（父亲与孩子）。

EDITED jsfiddle - https://jsfiddle.net/22nqe73q/5/

以下是代码：

<强> HTML

<div  class="td-sub-footer-container td-container-wrap ">
        <div  class="td-container ">
            <div class="td-pb-row">
                <div  class="td-pb-span td-sub-footer-menu">
                        <div class="menu-td-demo-footer-menu-container"><ul id="menu-td-demo-footer-menu"  class="td-subfooter-menu"><li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li>
<li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li>
<li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li>
<li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li>
</ul></div>                </div>

                <div class="td-pb-span td-sub-footer-copy">
                    © 2017 Site Name                </div>
            </div>
        </div>
    </div>

<强> CSS

.td-sub-footer-copy {
  text-align:center;  
}
.td-pb-span > .menu-td-demo-footer-menu-container {
    text-align:center; 
}

.menu-td-demo-footer-menu-container >ul > li{

   list-style-type: none;
}
.td-sub-footer-container td-container-wrap {

  text-align:center;
}

<强> RESULT

Answer 4

这里还有一个解决方案，只有四个CSS规则：

.td-pb-row {
  text-align:center;
}

.td-subfooter-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.td-sub-footer-copy,
.td-sub-footer-menu,
.menu-item {
  display: inline-block;
}

.td-sub-footer-copy::after,
.menu-item:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4rem;
}

<div class="td-sub-footer-container td-container-wrap ">
  <div class="td-container">
    <div class="td-pb-row">
      <div class="td-pb-span td-sub-footer-copy">
        © 2017 Site Name
      </div>
      <div class="td-pb-span td-sub-footer-menu">
        <div class="menu-td-demo-footer-menu-container">
          <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu">
            <li id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-727"><a href="#">Disclaimer</a></li>
            <li id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-728"><a href="#">Privacy</a></li>
            <li id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-729"><a href="#">Advertisement</a></li>
            <li id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-730"><a href="#">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>