如何將可變寬度的內聯塊元素居中？

Question

我有一個內聯塊nav元素，需要在其父容器內居中。 但是由於寬度是auto （因為我需要將其縮小到其內容），所以無法將其居中。

而且我不能使用text-align: center因為我不希望文本內容居中。 我只希望mainNavigation元素居中。

http://jsfiddle.net/vpvzmg3j/3/

我怎樣才能使這個東西居中？

 *{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><a href="">Home</a></li> </ul> </div> <div id="helpAndSupportMenuContainer"> <p>Help &amp; Support</p> <ul id="helpAndSupportMenu"> <li><a href="">User Guides</a></li> <li><a href="">Video Tutorials</a></li> </ul> </div> <div id="myAccountMenuContainer"> <p>My Account</p> <ul id="myAccountMenu"> <li><a href="">Sign In</a></li> <li><a href="">Register</a></li> </ul> </div> </nav> 

Answer 1

這是您要找的東西嗎？

代碼更新：

#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

演示： http ： //jsfiddle.net/vpvzmg3j/9/

添加打擊更改，這將使導航中心居中對齊，同時使內容左對齊：

    #mainNavigation{text-align: left;}
    .center-div{text-align:center;}

的HTML

    <div class="center-div"> <nav id="mainNavigation"> .....</nav> </div>