html - How to stack two UL classes directly on top of one another in the middle of the page -

i'm attempting center both of these middle image directly in center , text in "nav navbar-nav" centered well, not beginning @ word "bsm".

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">     <ul class="nav navbar-nav">         <img src="insertimage">     </ul>     <ul class="nav navbar-nav">          <li><a href="/">bsm <strong>project</strong> connect</a></li>     </ul> </div> 

i've had success centering left-margin 50% in css, have had no luck z-index. how have both objects directly in center of page image directly , evenly on top of words?

css:

div.collapse.navbar-collapse {   text-align:left;   width: 400px;   display: block;   margin-left: auto;  margin-right: auto; } 

as @showdev says helpful see css, try in parent container set width , add margin:0 auto. don't see point of using ul image if 1 not inside li tag.

other ways can use text-align: center parent element.