lolikols lolikols - 9 days ago 5
CSS Question

Centering multiple li/ul in a div

I have a div and inside are li and ul that I'm trying to center horizontally. I'm currently using this code:

#Header #HeaderBg #HeaderIn #Wrapper #TabStrip .level1 li, ul {margin:0 !important; position: absolute !important; top: 50% !important; left: 50% !important; margin-right: -50% !important; transform: translate(-50%, -50%) !important;}


However, when I use this code, it centers everything, but smushes them together instead of keeping the integrity of the list. Any ideas?

So if my div looks like this originally:

A B C D E F G

After using that code, it just looks like all those letters in the same space.

Answer

Your selector was a most likely misplaced ,

#Header #HeaderBg #HeaderIn #Wrapper #TabStrip .level1 li, ul {}
                                                         ^

This means that it is two selectors one is #Header #HeaderBg #HeaderIn #Wrapper #TabStrip .level1 li and the other is ul which applies to all ul elements.

You most likely need to remove the , so you can target only the ul in that hierarchy.