How to center align a SPAN in navbar

Question

When i am centring this middle span, the right span containing buttons go down, basically i want to make a navbar where one a is at left three 'a' are at center and last two buttons are at the right, left and right float is clear but centering the elements is not working properly HTML

<div class="topnav">
    <span class="left">
        <a href="">Hostingg</a>
    </span>
    <span class="topnav-cen">
        <a href="#">Plans</a>
        <a href="#">Find Domain</a>
        <a href="#">Why Us?</a>
    </span>
    <span class="right">
        <button>Sign In</button>
        <button>Join Waitlist</button>
    </span>
</div>

CSS

[THIS IS THE ERROR THE BUTTONS ARE GOING DOWN WHILE CENTERING THE MID DIV][1]
.topnav{
    overflow: hidden;
    position: relative;
}

.topnav a{
    text-decoration: none;
    float: left;
}

.topnav-cen {
    display: table;
    margin: 0 auto;
}


.left{
    float: left;
}

.right{
    float: right;
}

score 1 · Answer 1 · answered Mar 11 '22 at 07:23

Try the below code. This will solve your problem.

.topnav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.topnav a {
  text-decoration: none;
}

<div class="topnav">
  <span class="left">
    <a href="">Hostingg</a>
  </span>
  <span class="topnav-cen">
    <a href="#">Plans</a>
    <a href="#">Find Domain</a>
    <a href="#">Why Us?</a>
  </span>
  <span class="right">
    <button>Sign In</button>
    <button>Join Waitlist</button>
  </span>
</div>

score 1 · Answer 2 · answered Mar 11 '22 at 08:07

Simply you can use the flex property. The below code makes the three span in one alignment. which will align the content vertical center and equal space gap between the three spans

  .topnav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

score 0 · Answer 3 · answered Mar 11 '22 at 07:11

.topnav {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
}

.topnav a {
  text-decoration: none;
}

.topnav-cen {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

<div class="topnav">
  <span class="left">
    <a href="">Hostingg</a>
  </span>
  <span class="topnav-cen">
    <a href="#">Plans</a>
    <a href="#">Find Domain</a>
    <a href="#">Why Us?</a>
  </span>
  <span class="right">
    <button>Sign In</button>
    <button>Join Waitlist</button>
  </span>
</div>

How to center align a SPAN in navbar

3 Answers3