center justify ul inside column - html

Question

I know lot of questions has already been asked about centering an <ul> element inside a Bootstrap column but what I would like is to center the <ul>but not centering the text (I want every <li> to be vertically align).
Here's my code:
<div class="content-menu">
<h1 class="content-header">Information</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="content-menu-menu">
<li> <img src="images/info.png">Information</li>
<li> <img src="images/dollar.png">Pricing</li>
<li> <img src="images/more.png">Supplements</li>
<li> <img src="images/placeholder.png">Map</li>
</ul>
</div>
</div>
And my css:
.content-menu-menu {
float: none;
text-align: center;
list-style-type: none;
padding:0;
}
.content-menu-menu > li {
color:white;
padding-top: 10px;
}
.content-menu-menu > li > a > img {
width: 32px;
height:32px;
margin-right: 10px;
}
But here's what I got:
What I would like is that the list is on the center of the screen but every items are left aligned.
Any help would be appreciated !

Answer 1

Please see below. content-menu (center) and content-menu-menu > li (left) adjusted.
.content-menu {
text-align: center;
}
.content-menu-menu {
float: none;
padding:0;
display: inline-block;
}
.content-menu-menu > li {
color:white;
padding-top: 10px;
text-align: left;
}
.content-menu-menu > li > a > img {
width: 32px;
height:32px;
margin-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-menu">
<h1 class="content-header">Information</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="content-menu-menu">
<li> <img src="images/info.png">Information</li>
<li> <img src="images/dollar.png">Pricing</li>
<li> <img src="images/more.png">Supplements</li>
<li> <img src="images/placeholder.png">Map</li>
</ul>
</div>
</div>