Search code examples
htmlcssimagealignmentnavbar

Aligning text on both sides of a image in a navbar (html and css)

I want to have an image in the middle navbar that I have made but the text on the right gets pushed far away! how do I fix this?

This is what my Navbar looks like in the HTML:

Thank you!

Solution

  • What you're asking for can be achieved quite easily with flexbox.

    I don't have access to your CSS so I added a little bit myself just to demonstrate the basic principle in this codepen: https://codepen.io/Ardiaz/pen/zJRKmR

    Key notes here are as below:

    display: flex;

    This will declare your element as a flex element, which enables the suite of css declarations available in flex.

    justify-content: space-between;

    This will space all your elements evenly across the page, with the image in the centre as it is the centre most item within your element.