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

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 是块级元素，您需要确保将其设置为 display: inline-block 或仅使用 span。

ul 留有默认的 40px 内边距，也需要覆盖它。

将ul li设置为inline-block将使它们排成一行

垂直线可以通过 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/。我编辑一些 code.Please 尝试 this.I 编辑一些 CSS。我根据流程设置 CSS（parent 到 child）。

已编辑 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;
}

结果

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>

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

how to center align two objects on the same line

html

css

alignment

display