Centering a single element in navbar

HTML-CSS
1

My page

Hi guys,

As usual I’ve given it a good go, googled it but to no avail. ={

What would the steps be to have my name ‘Chris’ in the center of the navbar with the other links staying to the left?

And what element is the correct one to wrap ‘Chris’ in as it’s not an ‘a’ tag’, the finish product will maybe have a small logo in the center.

Thanks.

3

You could use CSS position to solve it. But on a mobile device the items will probably overlap.

* {

}

#navbar {
  display: block;
  width: 100vw;
  position: relative;

}
.logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%, -50%);
  }

Maybe you could center the .logo between the other items with flexbox

1 Like
4

Will give a go, thanks.