Question

我有一个间歇性居中（这是预期的）的flexbox容器（ul）而不是（在视图刷新时）。这是一个错误还是css中缺少某些东西？

HTML：

<div id="lower-half">
        <nav>
            <ul>
                <li>
                    <a href="menu.html">Menu</a>
                </li> 
                <li>
                    <a href="catering.html">Catering</a>
                </li> 
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>

            </ul>

        </nav>

CSS：

nav ul{
    display: flex;
    height: 100%;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    border: 3px solid;
    border-radius: 20px;
    width: 360px;
    background-color: white;
}

nav ul li {
    align-self: center;
    flex-grow: 1;
}

Answer 1

这听起来像一个奇怪的问题 - 它与浏览器有关吗？我刚试过pasting your code into a Pen，这确实是导航的中心。

但是，为了解决您的问题，我已经改变了您的CSS，而不会影响您的设计和定位 - 这可能会解决您的刷新问题。

Updated Pen

<强> HTML

<nav>
    <ul>
        <li>
            <a href="menu.html">Menu</a>
        </li> 
        <li>
            <a href="catering.html">Catering</a>
        </li> 
        <li>
            <a href="gallery.html">Gallery</a>
        </li>
        <li>
            <a href="about.html">About</a>
        </li>

    </ul>

</nav>

<强> CSS

nav {
    display: flex;
    justify-content: center;
}

nav ul{
    display: flex;
    flex-wrap: wrap;
    width: 360px;

    list-style: none;
    border: 3px solid;
    border-radius: 20px;
    background-color: white;
}

nav ul li {
    flex-grow: 1;
}

flexbox容器并不总是居中

1 个答案: