Menu
I've been puzzling over something which ought to be very easy indeed, but after a fruitless three hours I've not yet solved it:
A friend asked me to fix the template of his WordPress website so that the horizontal navigation menu-bar is centered horizontally on the page. He wants it to fit snugly across the bottom-middle of the red-section - then it would just fit between the two emblems on either side of the red page.
The red section (class="header") has text-align set to center. This seems to be good enough to ensure that the title and the description text underneath it are center aligned but for some reason I cannot make the menu (which is a ul) align to the center of the page.
Would anybody care to suggest what I'm doing wrong? Why is it that I cannot get the menu centered? What is it that I need to change in the style-sheet to get it working?
598
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
stackoverflow.com/questions/7516005/… You can use . parentOfUl{ text-align:center;} and then ul{ display:inline-block; }, and at last li{ text-align:center; }.
To center a row of blocks, you should use inline-block:
ul.menu { display: block; text-align:center; } ul.menu li { display: inline-block; } IE doesn't understand inline-block, but if you set it inline just for IE, it'll still behave as an inline-block:
<!--[if lt IE 8]> ul.menu li { display: inline } <![endif]--> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
