java4ever java4ever - 9 days ago 5
CSS Question

Center UL in parent and ignore other floating ULs

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
div
s 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
div
s?

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):

enter image description here

But now: (right menu isn't there, may not be needed on some pages):

enter image description here

The problem is, that I don't know the width of the
ul
s..

Hope somebody can help me!

Answer

A trick would be to have width of all three menu-containers be 33%. and seting text-align:left,text-align:center and text-align:right to containers Left, Middle and Right respectively.

Comments