Center Logo Text In NavBar, HTML and CSS-CodePudding

I am having a problem in my NAVBAR code!

Everything in my HTML and CSS is set up correctly, I am having the problem in one specific line of code where I am trying to Center The Text Logo!

Or should I specify another line of code to Center my Text Logo?

I put the Logo as a Text as I don't want to have an image as a logo.

But, now I am trying to Center the Logo Text in the Middle of the NAVBAR

but it is not working. I don't know how to put in the middle!

Please help!

PS: I don't want to change the current code, I just want to Center the Logo Text.

This is my Full Code in HTML and CSS!

Please Run it on your Editor to get a better understanding of it! Thank you for all your help.

HTML:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/0c0d062607.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" type="text/css" href="Styles/style.css" />
    <script
      src="https://kit.fontawesome.com/0c0d062607.js"
      crossorigin="anonymous"
    ></script>
    <title>My Page</title>
  </head>
  <body>
    <div >
      <a  href="#home"><i ></i> Home</a>
      <a href="portfolio.html"><i ></i> Portfolio</a>
      <a href="contact.html"
        ><i ></i> Contact</a
      >
      <a href="about.html"><i ></i> About</a>
      
      <a href="index.html" id="logo">My Logo</a>
      <div >
        <a
          
          href="https://facebook.com"
          target="_blank"
          title="Facebook"
          ><i ></i>&nbsp Facebook</a
        >
        <a
          
          href="https://instagram.com"
          target="_blank"
          title="Instagram"
          ><i ></i>&nbsp Instagram</a
        >
        <a
          
          href="https://twitter.com"
          target="_blank"
          title="Twitter"
          ><i ></i>&nbsp Twitter</a
        >
      </div>
    </div>
  </body>
</html>

CSS:

    body {
  background-image: url(../images/body_bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.topnav {
  background-color: rgb(54, 54, 54);
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 3px solid rgb(250, 186, 113);
  border-bottom: 3px solid rgb(250, 186, 113);
  filter: saturate(2);
}

.topnav a {
  float: left;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(250, 186, 113);
  text-align: center;
  padding: 11px 15px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

.topnav a:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: rgb(0, 0, 0);
}

.topnav a.active {
  background-color: rgb(250, 186, 113);
  color: white;
}

.social {
  float: right;
}

CodePudding user response：

Maybe you can do something like that

   <a href="index.html" id="logo" style="position: absolute;left: 50%;">My Logo</a>

CodePudding user response：

Try this code. I just changed few things into your code. Only 4-5 lines. Have look hope it will help you and fix your problem.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css">
        <script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
        <title>My Page</title>
    </head>
    <body>
        <div >
            <div >
                <a  href="#home"><i ></i> Home</a>
                <a href="portfolio.html"><i ></i> Portfolio</a>
                <a href="contact.html"><i ></i> Contact</a>
                <a href="about.html"><i ></i> About</a>
            </div>
        
            <div >
                <a href="index.html" id="logo">My Logo</a>
            </div>

            <div >
                <a  href="https://facebook.com" target="_blank" title="Facebook"><i ></i>&nbsp Facebook</a>
                <a  href="https://instagram.com" target="_blank" title="Instagram"><i ></i>&nbsp Instagram</a>
                <a  href="https://twitter.com" target="_blank" title="Twitter"><i ></i>&nbsp Twitter</a>
            </div>
        </div>
    </body>
</html>

CSS

    body {
    background-image: url(../images/body_bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .topnav {
    background-color: rgb(54, 54, 54);
    overflow: hidden;
    width: 100%;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 3px solid rgb(250, 186, 113);
    border-bottom: 3px solid rgb(250, 186, 113);
    filter: saturate(2);
    display: flex;
    justify-content: space-between;
  }
  
  .topnav a {
    float: left;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    color: rgb(250, 186, 113);
    text-align: center;
    padding: 11px 15px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
  }
  
  .topnav a:hover {
    background-color: rgba(255, 255, 255, 0.7);
    color: rgb(0, 0, 0);
  }
  
  .topnav a.active {
    background-color: rgb(250, 186, 113);
    color: white;
  }
  
  .social {
    float: right;
  }

Have a look. It's perfect