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

I'm attempting to center both of these so that the middle image is directly in the center and the text in "nav navbar-nav" is centered as well, not beginning at the 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 with left-margin 50% in the CSS, but have had no luck with the z-index. How do I have both objects directly in the center of the page with the image directly and evenly on top of the words?

CSS:

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

Solution

As @showdev says would be helpful to see your css, try in the parent container set a width and add margin:0 auto. Also I don't see the point of using a Ul with the image if this one is not inside a li tag.

Other Ways you can also use text-align: center with the parent element.