时间戳

首页 > 解决方案 > 导航栏不在中心

html - 导航栏不在中心

问题描述

我的导航栏有问题。我想做一个完全响应的网站。目前，除了导航栏之外的所有东西都可以工作。当我尝试拉伸网站时，导航栏下方的内容保持在中心，但导航栏向左移动。我还希望我的导航栏“固定”并随页面滚动。我想看到左侧的徽标和右侧的菜单项，但不知道该怎么做。你能帮我吗？

谈论那个页面：https ://fajferekpl.github.io/fjfr/

.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}

.site-nav {
width: 100%;
position: fixed;
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-logo {
grid-column: 1/4;
grid-row: 1;
color: var(--first-color);
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<nav class="site-nav grid" id="header">
    <div><a href="#" class="nav-logo">.fjfr()</a></div>
            <div class="nav-menu">
                <ul>
                    <li><a href="#welcome">.home()</a></li>
                    <li><a href="#about">.about()</a></li>
                    <li><a href="#portfolio">.portfolio()</a></li>
                    <li><a href="#skills">.skills()</a></li>
                    <li><a href="#contact">.contact()</a></li>
                    <li class="icon-navbar"><a href="https://www.github.com/fajferekpl" target="_blank"><i class="fab fa-github"></i></a></li>
                    <li class="icon-navbar"><img src="assets/img/sun1.png" id="icon-sun"></li>
                </ul>
        </div>
    <div class="hamburger-menu">
        <div class="bar"></div>
    </div>
</nav>

标签： htmlcssflexboxcss-grid

解决方案

我相信这只是一个定位和宽度问题。我以以下为中心...

使用固定定位，您必须确保告诉它要定位的位置。将其从左侧定位 50%（也就是 50% 到右侧），然后添加一个transform: translate后 50%（也就是左侧的另一个 50%）将使它居中。这是因为它从导航栏的最左角移动了 50%（而不是从它的中心），然后你必须将它向后移动 50% 以使其成为真正的中心。

.site-nav-colored {
    width: 100%;
    position: fixed;
    z-index: 99;
    background-color: var(--background-color);
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 4px
    var(--first-color);
    left: 50%;
    transform: translate(-50%);
}

此外，导航栏的宽度受此部分影响。它最多只能达到 1060 像素。

media screen and (min-width: 950px)
.grid {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
}

因此，如果您希望它扩展屏幕的整个宽度，那么导航必须class="grid"在您的 HTML 中的 div 之外。

推荐阅读