Question

我有一个菜单，其中一个菜单项是徽标。我想将菜单居中，以便徽标项目保留在页面的中心。目标是通过徽标分割菜单，该菜单以徽标为中心。徽标的位置由菜单项数/ 2 + 1计算，如果需要则向下舍入。示例：有6个菜单项，标识位于现场4;有5个菜单项，标志位于现场3。

并发症：1）菜单项没有设置宽度 - 这是为了响应，我在每个时刻都避免设置像素宽度，2）我不想使用JavaScript

编辑：HTML

<ul class="nav-menu">
    <li class="menu-item">
        <a href="/link-1">
            <span>Link 1</span>
        </a>
    </li>
    <li class="menu-item-logo">
        <div id="logo">
            <a href="http://example.com/">
                <img src="https://pbs.twimg.com/profile_images/581134293931548673/8R33fIjl.png"/>
            </a>
        </div>
    </li>
    <li class="menu-item">
        <a href="/link-2">
            <span>Link 2</span>
        </a>
    </li>
    <li class="menu-item">
        <a href="/link-3">
            <span>Link 3</span>
        </a>
    </li>
</ul>

CSS

<style> 
.nav-menu {
    display: flex;
    justify-content: space-between;
    width: 85%;
}

.nav-menu .menu-item {
    display: inline-block;
    margin: .25rem 2rem;
    text-align: center;
}

#logo {
    max-width: 15vw;
}

#logo img {
    width: 100%;
}
</style>

jsfiddle @ https://jsfiddle.net/szamxv2u/

如何根据该列表中的单个项目居中我的水平列表？

0 个答案: