Question

我有一个内联块nav元素，需要在其父容器中居中。但是因为宽度是auto（因为我需要它缩小到它的内容），所以我不能把它放在中心位置。

我无法使用text-align: center，因为我不希望文本内容居中。我只想让mainNavigation元素居中。

我该如何集中这件事？

*{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

this您要找的是什么？

代码更新：

gcc -Wall -g -o selection_sort selection_sort.c

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>

如何将可变宽度的内联块元素居中？

2 个答案: