how to make two lists horizontally central

Question

I have two lists that I want both to be side by side each other. But also I want them to be central of the page. They both are within a pure-menu div, so when i try to put an outer div on both then they seem to hide away / disappear.

example code:

<div id="submenu" class="pure-hidden-tablet pure-hidden-desktop pull-left">
    <div class="pure-menu pure-menu-open ">
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 </div>
</div>

css:

.rightMenu{
   margin-left:20%;
   float:left;
 }
 .leftMenu{
  float:left;
   margin-left:20%;
 }

this aligns them together together on one line with the float:left. However I'm struggling to centralise them on a 100% width page.

Answer 1

.mem
{
    float:left;
    position: relative;

}

<div>
<div class="mem">
<ul>
    <li>hi</li>
    <li>hello</li>
</ul>
</div>
<div class="mem">
    <ul>
    <li>hi</li>
    <li>hello</li>
</ul>
</div>
</div>

Enclose both the lists in div tags and again put them in a single div and apply css. Try this it will solve your problem. Don't forget to tick it right.

Answer 2

Here's a quick and easy method using inline block, text-align center and a wrapping div.

.menu-wrap {
  text-align:center;
    }

.menu-wrap ul {
  display:inline-block;
  }

<div class="menu-wrap">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
  </div>

Answer 3

To center content use a wrapper.

.wrapper {
  width: 80%; // define it's width
  margin: 0 auto; // set margins. auto will center it
}

Then wrap your markup.

<div class="wrapper">
  <ul>
    <li></li>
  </ul>
  <ul>
    <li></li>
  </ul>
</div>

Demo