Html 如何排列导航栏上的文本？

我想知道是否有人能帮我解决一个问题。我希望文本“Liam的数字公文包”与导航栏文本在网页顶部的中心位置。此外，我还希望导航栏位于最右角，如codepen链接中所示

我刚刚开始编程，这是我的第二天，我真的很想改进，如果代码的结构不正确，我深表歉意

下面是我的HTML代码，如果需要，代码笔中是我的CSS

<div id="Navagationbar">
   <ul>
  <li><b><a href="#">HomePage</a></b></li>
  <li><b><a href="#">Portfolio</a></b></li>
  <li><b><a href="#">Contact Us</a></b></li>
  <li><b><center>Liam's Digital Portfolio<center></b></li>
   </ul>
 </div>
     </body>
</html>

利亚姆的数字投资组合

谢谢，

---

利亚姆。

我祝您在编码过程中一切顺利：）我将为您提供一个简单的解决方案，以获得所需的效果。首先，在css中从主体上切割填充顶部：

padding-top: 180px;

现在从html中删除

  <li><b><center>Liam's Digital Portfolio<center></b></li>

---

移除并添加填充顶部后，标题将位于页面中心，并与导航栏对齐。我发现你的css有很多问题，所以我建议你学习一个好的教程，比如w3schools的教程。我希望这有帮助，祝你好运

进行如下HTML更改

        <ul>
          <li><b><a href="#">HomePage</a></b></li>
          <li><b><a href="#">Portfolio</a></b></li>
          <li><b><a href="#">Contact Us</a></b></li>
          <li style="position:absolute;right:45%"><b><a href="#">Liam's Digital Portfolio</a></b></li>
       </ul>

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}



    h1 {
    font-family:Arial;
    color:white;
    font-size:10pt;
    text-align:center;
    }

    li a:hover:not(.active) {
    background-color:grey;
}

   #Navagationbar {
   font-family:Arial;
   color:white;
   font-size:10pt;
   text-align:center;

}

   #Navagationbar ul {
   list-style:none;
   float:right;
   margin:0;
   padding:0;

}
   #Navagationbar ul li {
   display:block;
   list-style:none;
   margin:0;
   padding:0;


}

#Navagationbar ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   color:white;;
   text-decoration:none;
   line-height:1.3em;

}
#Navagationbar ul li a:hover {
   color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
   color:white;

}

body {
  margin:0;
}
.page{
  min-height:-590px;
  background:linear-gradient(45deg, #999, #FFF);
}
#footer{
  list-style:none inside none;
  margin:0;
  padding:0;
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  height:50px;
  background-color:#1f1f1f;
  font-size:0;
}
#footer li {
  font-family:Arial;
  float: right;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}
#footer li {
  font-family:Arial;
  float: left;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}


#footer li:last-child {
  border-right:0;
}

    body {
        background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
            position:static;
            height:400px; 
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-size:cover;

        }

---

不推荐使用中心标记，因此建议使用其他标记。如果您希望将某些文本居中，并且除了列表中的其他部分之外，最好将其作为单独的元素对待。@Armin好的，谢谢您的反馈。你说不推荐是什么意思？你能告诉我你所说的独立元素是什么意思吗？给你一些解释。我所说的分离元素不是

元素，而是列表之外的一些非列表元素。您可以查看L的答案了解更多详细信息。欢迎来到stackoverflow！请花点时间回顾一下我们的答案。太棒了！我感谢你的帮助。我将研究使用你推荐的网站来提高/学习我的编码技能。很高兴它对我有所帮助！你也可以搜索youtube，因为它有很多很好的css教程，如果你发现观看别人向你解释比阅读文本更有效的话。这支笔看起来和你发给我的第一支笔一样。下面是我上面写的说明。标题在中间，与导航巴诺问题一致，我对问题进行了排序。我会把完成后的网站发给你。谢谢

        <ul>
          <li><b><a href="#">HomePage</a></b></li>
          <li><b><a href="#">Portfolio</a></b></li>
          <li><b><a href="#">Contact Us</a></b></li>
          <li style="position:absolute;right:45%"><b><a href="#">Liam's Digital Portfolio</a></b></li>
       </ul>

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}



    h1 {
    font-family:Arial;
    color:white;
    font-size:10pt;
    text-align:center;
    }

    li a:hover:not(.active) {
    background-color:grey;
}

   #Navagationbar {
   font-family:Arial;
   color:white;
   font-size:10pt;
   text-align:center;

}

   #Navagationbar ul {
   list-style:none;
   float:right;
   margin:0;
   padding:0;

}
   #Navagationbar ul li {
   display:block;
   list-style:none;
   margin:0;
   padding:0;


}

#Navagationbar ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   color:white;;
   text-decoration:none;
   line-height:1.3em;

}
#Navagationbar ul li a:hover {
   color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
   color:white;

}

body {
  margin:0;
}
.page{
  min-height:-590px;
  background:linear-gradient(45deg, #999, #FFF);
}
#footer{
  list-style:none inside none;
  margin:0;
  padding:0;
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  height:50px;
  background-color:#1f1f1f;
  font-size:0;
}
#footer li {
  font-family:Arial;
  float: right;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}
#footer li {
  font-family:Arial;
  float: left;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}


#footer li:last-child {
  border-right:0;
}

    body {
        background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
            position:static;
            height:400px; 
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-size:cover;

        }