How do I center an inline-block element of variable width? - html

Question

I have an inline-block nav element that needs to be centered inside its parent container. But because the width is auto (because I need it to shrink to its content), I can't center it.
And I can't use text-align: center because I don't want the text content to be centered. I just want the mainNavigation element to be centered.
http://jsfiddle.net/vpvzmg3j/3/
How can I center this thing?
*{margin:0;padding:0;}
#mainNavigation
{
display: inline-block;
width: auto;
height: auto;
margin: 0 auto;
background-color: blue;
}
#mainNavigation div
{
width: auto;
float: left;
}
#mainNavigation div p
{
float: left;
width: 100%;
}
#mainNavigation div ul
{
width: auto;
height: auto;
float: left;
}
#mainNavigation div ul li
{
list-style-type: none;
display: inline;
}
<nav id="mainNavigation">
<div id="homeMenuContainer">
<p class="noDisplay">Home</p>
<ul id="homeMenu">
<li>Home</li>
</ul>
</div>
<div id="helpAndSupportMenuContainer">
<p>Help & Support</p>
<ul id="helpAndSupportMenu">
<li>User Guides</li>
<li>Video Tutorials</li>
</ul>
</div>
<div id="myAccountMenuContainer">
<p>My Account</p>
<ul id="myAccountMenu">
<li>Sign In</li>
<li>Register</li>
</ul>
</div>
</nav>

Answer 1

Is this what you are looking for?
The code updates :
#mainNavigation {
text-align: center; /*this does the trick with its child*/
height: auto;
width: 100%;
margin: 0 auto;
}
#mainNavigation div {
/*you said you want them on the left side*/
text-align: left;
background-color: blue;
display: inline-block;
vertical-align: middle;
margin-left: -4px; /*inline-block space remove*/
}

Answer 2

Demo: http://jsfiddle.net/vpvzmg3j/9/
add blow changes, that will center align the nav and same time left align the content:
#mainNavigation{text-align: left;}
.center-div{text-align:center;}
HTML
<div class="center-div"> <nav id="mainNavigation"> .....</nav> </div>