Html 如何将收割台/顶部导航中的元素与中心对齐

我正在创建一个需要顶部导航栏的html代码。我已经有一个了，但它没有完全显示出我想要的风格。我希望上面写着“家”和“即将”的部分位于中间，而“联系我们”部分位于右侧。当前顶部导航没有响应。如果我在移动设备上，我希望顶部导航的汉堡（三行）图标位于右侧，当单击图标时，它将具有全屏导航。最后，我希望我们的联系方式保持一致。谢谢

HTML

<div class="header">
    <div class="headerlist">
        <h2 id="name">Sprinkler<span id="blue">System</span></h2>
        <div class="top-head">
            <ul>
                <li><a href="" id="contact">Contact Us</a></li>
                <li><a href="">About</a></li>
                <li id="home"><a href="">Home</a></li>
            </ul>
        </div>
    </div>
</div>

代码笔：

//html5
洒水系统



=
//css3
@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
* {
保证金：0；
填充：0；
}
标题{
显示器：flex；
证明内容：周围的空间；
高度：100px；
}
氢{
弹性：1；
文本对齐：居中；
}
导航{
显示器：flex；
弹性：1；
对正内容：空间均匀；
}
李海军{
列表样式：无；
}
.图标{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：500px）{
导航{
显示：无；
}
.图标{
显示：块；
弹性：1；
文本对齐：居中；
}
}
//JS
var domElemIcon=document.querySelector（'.icon'），
domElemList=document.querySelector（'nav'），
domElemTitle=document.querySelector（'h2'）
domElemIcon.onclick=函数（）{
domElemIcon.style.display='none'；
domElemTitle.style.display='none'；
domElemList.style.display='block'；
}

---

我不知道这是否是您想要的，您可以尝试运行并查看结果。

好的，我尝试使用引导修复此问题： 看看代码笔

身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
响应式Topnav示例
调整浏览器窗口的大小以查看其工作方式

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

你可以使用Bootstrap（）而不是自己做。@maxime-gélina我会检查一下，我从来没有使用过Bootstrap，我不知道它是如何工作的，但我会尝试一下，但是如果它在移动设备上，有没有办法让页面有一个汉堡包图标？我不太明白你的代码。它只是调整标题的大小，没有按钮替换链接。页面是有响应的，但我希望汉堡图标弹出，而不是链接保持更新。在响应视图中打开codepen，您将感觉到更改效果良好，然后请向上投票，以便下一位访问者可以从向上投票的答案中看到正确的答案

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    background-color: white;
}

.headerlist {
    position: absolute;
    background-color: white;
    display: inline;
    width: 99.5%;
    opacity: 0.8;
    z-index: 6;
    margin: 0px;
}

#name {
    font-size: 16px;
    font-style: normal;
    float: left;
    margin-left:180px;
    top: 4px;
    position: relative;
}

.headerlist {
    position: absolute;
    background-color: white;
    display: inline;
    padding-right: 160px;
    width: 98.9%;
    opacity: 0.99;
    z-index: 6;
    padding-top: 20px;
    top: -10px;
    font-size: 16px;
}

.headerlist ul {
    list-style-type: none;
    float: right;
    margin-top: 20px;

}

.headerlist ul a {
    text-decoration: none;
    float: right;
    color: black;
    /* margin-left: 20px; */
    margin-right: 100px;
    font-size: 15px;
}

.headerlist ul {
   /*  text-align: center;
    margin-left: 0 auto;
    margin-right: 0 auto;
    width: 75%;
    position: fixed;
    left: 50%;
    margin-left: -37.5%; */
}

.headerlist ul a:hover {
    line-height: 1;
}

li {
    display: inline;
}

.body {
    margin-left: 180px;
}

.headerlist {
    padding-top: 6px;
    padding-bottom:0px;
    border-bottom: 1px solid rgb(239, 239, 239);
}

#blue {
    color: rgb(38, 99, 242);
}

.huge {
    font-size:90px;
    font-weight: 900;
}

#contact {
    background:blue;
    border-radius:5%;
    padding:10px;
    color:white
}

//html5

<header>
  <h2 id="name">Sprinkler<span id="blue">System</span></h2>
  <nav>
    <li><a href="" id="contact">Contact Us</a></li>
                <li><a href="">About</a></li>
                <li id="home"><a href="">Home</a></li>
  </nav>
  <div class="icon">=</div>
</header>

// css3

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}
header {
  display: flex;
  justify-content: space-around;
  height: 100px;
}
h2 {
  flex: 1;
  text-align: center;
}
nav {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}

nav li {
  list-style: none; 
}

.icon {
  display: none;
}

@media screen and (max-width: 500px) {
  nav {
    display: none;
  }
  .icon {
    display: block;
    flex: 1;
    text-align: center;
  }
}

// JS
var domElemIcon = document.querySelector('.icon'),
   domElemList = document.querySelector('nav'),
   domElemTitle = document.querySelector('h2') 

domElemIcon.onclick = function() {
  domElemIcon.style.display = 'none';
  domElemTitle.style.display = 'none';
  domElemList.style.display = 'block';
}

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>