1. 首页
  2. 问答
  3. 如何居中对齐同一行上的两个对象

如何居中对齐同一行上的两个对象

2017-07-19 47 views
1

我想中心对齐我的页脚菜单项。我在页脚有两个项目，一个版权和一个菜单。如何将这两个项目在中心对齐，以便它们彼此相邻？如何居中对齐同一行上的两个对象

我想要有页脚做

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

的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>

来源

2017-07-19 user7548188

回答

1

不知道为什么你有这么多的div的嵌套，这是不需要的，你可能要清理这些。

但这里是解决方案，div是块级元素，您需要确保将其设置为显示：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>

来源

2017-07-19 19:04:19

+0

感谢帮帮我。我试图编辑一个预先制作的主题，所以我宁愿不要混淆div选择器。有什么办法可以使它与我原来的代码一起工作？ - https://jsfiddle.net/22nqe73q/3/ – user7548188

+0

@ user7548188它来自您的代码 –

+0

@ user7548188 https://jsfiddle.net/dalinhuang/vhuoy4m3/ –

0

所以首先它看起来像你的选择是有点过。

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

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

但是到了问题的要点。您需要将display: inline-block;应用于列表项。因此，像：

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

来源

2017-07-19 19:00:09

+0

我编辑预先制作的主题，所以我宁愿不惹恼选择器。如果我应用您的建议CSS，菜单项相互对齐，但它们不在版权旁边。 – user7548188

+0

要使菜单和版权彼此相邻，您需要将'display：inline-block'应用于这些元素（.td-sub-footer-menu＆.td-sub-footer-copy） –

0

我参观的jsfiddle - https://jsfiddle.net/22nqe73q/。我编辑一些CSS。我设置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

来源

2017-07-19 19:09:41

0

下面是你一个解决方案，只有四个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>

来源

2017-07-19 19:15:06 trevor

相关问题

 相关问题