How to center a nav bar

[spongebobninja]

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
Not an exercise

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
I was wondering how I can center my navigation bar

```

Replace this line with your code.

<do not remove the three backticks above>

[stetim94]

There isn’t one universal solution, if the nav-bar is a block, you could try margin: 0 auto; this will give the maximum possible margin on left and right side, which causes the nav bar to center

otherwise, check this centering guide:

Centering in CSS: A Complete Guide | CSS-Tricks

if that doesn’t work either, post your code so we can have a crack at it

[spongebobninja]

thank you, I managed to center it using the margin: 0 auto; before Thanks again. Also another question

I have an image which floats to the right of a div box. I want to put another image under neath that image. Is that possible

[stetim94]

if that doesn’t work either, post your code so we can have a crack at it

without code, difficult to say.

you can make the images block level elements, then they will sit below each other

you could even use a quick and dirty break (would advise against it)

you could use margins perhaps, but it depends on your code

[stetim94]

elements interact with each other, the only way i can help you is when you post your full html and css code

[spongebobninja]

i tried putting my html but its showing the real thing not the code?

[stetim94]

you need format for it:

How do I format code in my posts?

To format code so it’s visible, either wrap it in single backticks for a small amount of code, or triple backticks on an otherwise blank line before and after for a large amount of code.

but i now did this for you, so it should show now, if not, refresh the page

Read the topic i posted, then next time you can do this yourself

[stetim94]

you could simply add a second image and also float it to the right, that will work

there is only small problem, there isn’t enough height left for two such big images with so much padding and margin, so you will or need to make the image smaller or give the parent element a higher height

[stetim94]

there is only small problem, there isn’t enough height left for two such big images with so much padding and margin, so you will or need to make the image smaller or give the parent element a higher height

if there isn’t enough space, of course it will look poor. But i covered this problem already, if you make the images a lot smaller, you will see it works perfectly. Which simply indicates a lack of space, which you need to fix

[mayankpatel.cms]

You Should try this…

<div class="navcenterAlign">
   .... Your Nav Bar Code Here ....
</div>

<style>
 .navcenterAlign {
      display: flex;
      align-items: center;
      justify-content:center;
 }

</style>

or you can go through

A Complete Guide to Flexbox | CSS-Tricks