Question

我试图弄清楚如何将链接对齐到导航栏的中心，这与它们现在位于顶部的方式不同。我已经附上了到目前为止所做的工作，但是我无法弄清楚如何将链接对齐。我已附上以下内容。任何帮助都将不胜感激。

我尝试了不同的内容和文本对齐方式以及位置，但无济于事。但是我仍然只是学习，可能还没有尝试过一切

<body>
    <header>
        <div class="navbar">
            <a href="index.html"><img src="images/logo.png" alt="logo"></a>
            <a href="home.html">Home</a>
            <a href="#design">Design</a>
        <div class="dropdown">
            <button class="dropbtn">Photo 
                <i class="fa fa-caret-down"></i>
            </button>
        <div class="dropdown-content">
            <a href="#phportrait">Portrait</a>
            <a href="#phland">Landscape</a>
            <a href="#phstreet">Street</a>
            <a href="#phproduct">Product</a>
        </div>
        </div>
            <a href="contact.html">Contact</a>
            <a href="about.html">About</a>
        </div>
    </header>

* {
    padding: 0;
    margin: 0;
}

/* Navbar */

header {
    align-content: center;
    text-align: center;
}
.navbar {
  overflow: hidden;
  background-color: black;
  font-family: futura-pt, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  font-weight: 600;
  color: #939393;
  text-align: center;
  padding: 35px;
  text-decoration: none;
  letter-spacing: 4px;  
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px; 
  letter-spacing: 4px;
  border: none;
  outline: none;
  color: #939393;
  font-weight: 600;
  padding: 35px 35px;
  background-color: inherit; 
  font-family: inherit;
  margin: 0;
}

.navbar a:hover , .dropdown:hover .dropbtn {
  color: white;
  transition: background-color 200ms ease-out;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #3E3E3E;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Answer 1

https://jsfiddle.net/andrwrbnsn/ag389x4c/13/

如果将flexbox用于导航栏display: flex，则可以设置margin-left: auto和margin-right: auto，这将告诉浏览器填充左侧的空间并填充右侧的空间，居中。然后将徽标设置为绝对位置，以免按钮偏离中心。

Answer 2

.navbar {
  display: flex;
  justify-content: center;
}

Answer 3

您的navbar可以在其父元素header上使用flex属性轻松居中。并且，您需要设置header而不是navbar的背景色。考虑编辑如下：

header {
/*     align-content: center; */
/*     text-align: center; */
  width: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
}
.navbar {
  overflow: hidden;
  font-family: futura-pt, sans-serif;
}

如何在导航栏中的非列表中对齐链接

3 个答案: