how to center align two objects on the same line

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>

Solution

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>