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

Question

I am trying to center align my footer menu items. I have two items in the footer, a copyright and a menu. How do I align both of these items in the center so they are next to each other?

What I'm trying to have the footer do

©Site Name | Disclaimer | Privacy | Advertisement | Contact Us

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

So first it looks like your selectors are a little off.

For Example: .td-pb-span td-sub-footer-copy

But I think you mean: .td-pb-span.td-sub-footer-copy

But to the point of the question. You need to apply display: inline-block; to the list item. So something like:

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

Answer 2

Not sure why you have so many div nested, which is not needed, you might want to clean up those.

But here is the solution, div are block level element, you need to make sure set it display: inline-block or just use span.

ul has default 40px padding left, need overwrite that too.

set ul li to inline-block will make them in one row

the vertical line can be achieved by border-right: 1px solid #000000; , but make sure you have the following so last item does not have that line at the end.

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

I visit the jsfiddle - https://jsfiddle.net/22nqe73q/ . And I edit some code.Please try for this.I edit some CSS .I set CSS according to flow(parent to child).

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

Here are the codes :

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

Here's one more solution for you, with only four CSS rules:

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