Question

我在Bootstrap中设置了以下NavBar。此刻，它对齐，以便链接和徽标之间的间隙都是相同的距离。但是，由于链接名称大小不同，这意味着徽标实际上并不在导航栏的中间，看起来有点奇怪。如何对齐项目，使其中心间隔均匀？

<nav class="navbar navbar-default">
    <div class="container-fluid" id="logoStripe">
        <div class="collapse navbar-collapse" id="defaultNavbar1">
            <ul class="nav navbar-nav links">
                <li><a href="#"><h1>About</h1></a></li>
                <li><a href="#"><h1>Pre-Order</h1></a></li>
                <img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;">
                <li><a href="#"><h1>News</h1></a></li>
                <li><a href="#"><h1>Contact Us</h1></a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 28px;
    color: #FFFFFF;
    vertical-align: bottom;
    margin-top: 0px;
}

.navbar-default{
    border:hidden;
    }

#logoStripe {
    background-color: #54534a;
}

Answer 1

如果您确定只有这四个链接，可以将这个CSS代码添加到您的样式中，它应该有效：

.links > * {
    width: 20%;
    text-align: center;
}

或

.links > img, .links > li {
    width: 20%;
    text-align: center;
}

通过这种方式，您可以确保每个项目都占用相同的空间，并且其内容将居中。

Space NavBar元素使得中心是等距的？

1 个答案: