Menu
So I have the following CSS in place to display a horizontal navigation bar using:
.navigation ul { list-style: none; padding: 0; margin: 0; } .navigation li { float: left; margin: 0 1.15em; /* margin: 0 auto;*/ } .navigation { /* width: auto;*/ /* margin: 0 auto;*/ text-align: center; } My question is: how do I align the navigation bar centrally above the title?
431
Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ). If you want to do it with margin for whatever reason, look into width: fit-content; .
Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements: text-align:center; position: relative; and display: inline-block; that should center it.
There is no way to float center in CSS layout. So, we can center the elements by using position property. Example 1: This example set the position of elements exactly at the center of the screen.
Here's a solution that doesn't require specifying the width of your ul.
51
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
