如何对齐未使用列表制作的导航栏中的链接答案

【问题标题】：How to align links in a navbar not made with a list如何对齐未使用列表制作的导航栏中的链接
【发布时间】：2019-08-30 01:33:23
【问题描述】：

我试图弄清楚如何将我的链接对齐到导航栏的中心，这与它们现在在顶部的方式不同。我已经附上了我到目前为止所做的事情，但我无法弄清楚如何将链接对齐到中间。我附上了我在下面所做的事情。任何和所有的帮助将不胜感激。

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

<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;
}

【问题讨论】：

How to center multiple inline-block elements with CSS?的可能重复

标签： html css html5-canvas

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案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;
}

【讨论】：