个人中心
gpt4 book ai didi

How to center elements in navbar(如何使元素在导航栏中居中)

转载 作者：bug小助手 更新时间：2023-10-25 10:56:12 26 4
gpt4 key购买 nike



I have an issue centering the elements of my navbar in my page. I think that is something related to the CSS file, but I can't find the error, please help me out.

我有一个问题，我的导航栏的元素在我的页面居中。我认为这是与css文件有关的东西，但我找不到错误，请帮助我。




li {
  list-style: none;
}

p,
ul {
  margin: 0;
  padding: 0;
}

div,
li {
  box-sizing: border-box;
}

.header_nav {
  background: linear-gradient(90deg, #fff 20%, rgba(0, 0, 0, .6) 60%);
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: stretch;
  position: fixed;
  top: 0;
  width: 100%;
}

.global_nav_item {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.global_nav_item:hover {
  background: #fff;
  color: #42210b;
}

.global_nav {
  display: flex;
  align-items: stretch;
}

.logo {
  width: 120px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 100%;
}

.section_inner {
  padding: 50px 10% 30px;
}

.key {
  height: 500px;
  background: center / cover no-repeat url("https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_key.jpg");
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
}

.key h1 {
  font-size: 2.5rem;
}

.visual-key h1,
.visual-key p {
  margin-top: 80px;
  text-align: left;
}

#menu {
  background: center / cover no-repeat url("https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_menu_bg.jpg");
  background-attachment: fixed;
  background-position: center bottom;
}

<header>
  <nav class="header_nav">
    <a href="index.html" class="logo"><img src="https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_logo_k.png"></a>
    <ul class="global_nav">
      <a href="index.html" class="global_nav_item">
        <li>Home</li>
      </a>
      <a href="#menu" class="global_nav_item">
        <li>Menu</li>
      </a>
      <a href="contact.html" class="global_nav_item">
        <li>Contact</li>
      </a>
    </ul>
  </nav>
  <div class="key section_inner visual-key">
    <h1>DIC Coffee</h1>
    <p>natural organic cafe</p>
  </div>
</header>




I've tried to center the elements with different combinations of commands, and checked the CSS file if there's some other part of the code that changes the properties of my HTML element but didn't find anything.

我尝试用不同的命令组合将元素居中，并检查了css文件，如果代码中有其他部分更改了我的HTML元素的属性，但没有找到任何东西。


更多回答

Please keep your example minimal. Only share the code related to your problem. You'll most likely get useful helps that way. Welcome to SO, by the way.

请尽量减少你的例子。只分享与您的问题相关的代码。通过这种方式，您很可能会得到有用的帮助。顺便说一句，欢迎来到So。

Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example.

请修改您的代码，以便更容易地找到您的问题。遵循这些指导原则，创建一个最小的可重现示例。

优秀答案推荐

the .header-nav class has justify-content:space-between; set on it. Remove it, then add justify-content:center; and width:100%; to .global_nav

Header-NAV类上设置了JUSTIFY-CONTENT：SPACE-BETWING；。将其删除，然后将JUSTIFY-Content：Center；和Width：100%；添加到.global_nav


The justify-content:space-between; was forcing the .global-nav to be right justified.

JUSTIFY-CONTENT：空格；正在迫使.global-NAV正确对齐。


更多回答

26 4 0
文章推荐： To display manager details if more than one manager is from same city(如果多个经理来自同一城市，则显示经理详细信息)
文章推荐： How to ensure completeness in an enum switch at compile time?(如何在编译时确保枚举开关的完整性？)
文章推荐： Eclipse Git SSH : Could not connect to SSH agent via socket(Eclipse Git SSH：无法通过套接字连接到SSH代理)
文章推荐： Drop_caches by app doesn't work(应用程序删除缓存不起作用(_C))
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com