I have a problem:
I’m building a wordpress site with Bootstrap.
I have a navbar with 3 menus: Left, Middle and Right.
Every UL is surrounded by an div like navbar-menu-left or navbar-menu-right.
The left and right divs are floated left or right.
Now I want to have the middle-menu in the middle or the navbar. If I center it with text-align: center in the navbar-header div, it’s centered but if there’s no right menu, it is centered between the left menu and the right side of the navbar. How can I center die middle menu in the parent div and not between the floating divs?
Margin doesn’t work, the navbar-menu-middle is displayed with display: inline block. If i remove the display: inline-block it is next to the right menu. The order of the menus is:
left, right, middle
The images show what I mean:
Everything good (menus have nearly the same width):
But now: (right menu isn’t there, may not be needed on some pages):
The problem is, that I don’t know the width of the uls..
Hope somebody can help me!
A trick would be to have width of all three menu-containers be 33%. and seting
text-align:left,text-align:centerandtext-align:rightto containers Left, Middle and Right respectively.