How to center a nav bar


#1


Not an exercise


I was wondering how I can center my navigation bar


Replace this line with your code.


#2

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:

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


#3

thank you, I managed to center it using the margin: 0 auto; before :smiley: 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


#4

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


#6

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


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

#9

you need format for it:

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


#10

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


#12

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


#13

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


#14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.