如何在导航栏居中Webpage标志并移除右侧边距使HOME对齐

需求说明 #

刚接触HTML，想要实现以下导航栏效果：

• 将「Webpage」标志居中显示
• 移除标志右侧的边距，让「HOME」选项与其处于同一行，形成标准导航栏样式

原问题截图 #

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Design</title>
    <link href="q1.css" rel="stylesheet"/>
    <style>
    body{
       margin:0;
       background-color: rgb(36, 37, 37);
    }
    .container{
        padding-top:3px;
        padding-bottom:3px;
        width: 100%;
        background-color:#003333;
        height: 50px;
        /* 新增flex布局，让内部元素同行并垂直居中 */
        display: flex;
        align-items: center;
    }

    .title-box{
        /* 移除左侧边距，设置左右auto实现居中 */
        margin: 0 auto;
    }
    .title-box label{
        margin: 5px;
        text-align: center;
        color:#E0E0E0;
        border-color:rgb(11, 107, 19);
        border-style:double;
        border-width: medium;
        width: fit-content;
    }

    .tasks{
        /* 给HOME链接加右侧内边距，避免贴边 */
        padding-right: 20px;
    }
    .tasks a{
        /* 统一链接颜色，适配导航栏风格 */
        color: #E0E0E0;
        text-decoration: none;
    }

    .para{
        padding-left: 8px;
        margin: 0%;
        background-color: #515253;
        padding-top: 10px;
        padding-bottom: 10px;
        width: fit-content;
    }
    .para p{
        margin: 0%;
        color: #e1f2f7;
    }
    </style>
  </head>

  <body>
    <div class="container">
        <div class="title-box">
            <label>Webpage</label>
        </div>
        <div class="tasks">
            <a href="#">HOME</a>
        </div>
    </div>
    <div class="para">
        <p>The first web page went live on August 6, 1991. 
            It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. 
            It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. 
            The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html.
            A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.
            <br><br>
            A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a website, like our Computer Hope website.
            <br><br>
            When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
        </p>
    </div>
  </body>
</html>

关键修改点 #

• 给.container添加display: flex; align-items: center;：用flex布局替代原有的float，让导航栏内的元素强制在同一行，同时实现垂直居中，解决换行和对齐问题。
• 调整.title-box的外边距：移除margin-left:20px，设置margin: 0 auto，让「Webpage」标志在导航栏中水平居中。
• 优化「HOME」链接样式：添加颜色和移除下划线，同时给.tasks加右侧内边距，避免链接紧贴页面边缘，提升视觉效果。

内容的提问来源于stack exchange，提问作者Naga Nir