sunilpandya Posted September 3, 2015 Share Posted September 3, 2015 I have prepared Horizontal menu for my website, I have utilised css3 to prepare my menu. Following are the code <body> <ul> <li> <a href="http://www.spinfonet.com/jobs.html">Jobs</a> </li> <li> <a href="http://www.spinfonet.com/matrimony.html">Matrimony</a> </li> <li> <a href="http://mydomain.com/property.html">Property</a> </li> </ul><img alt="Splogo" src="Splogo.jpg"> <ul> <li> <a href="http://mydomain.com/aboutus.html">Aboutus</a> </li> <li> <a href="http://mydomain.com/aboutfounder.html">Founder</a> </li> <li> <a href="http://mydomain.com/contactus.html">Contactus</a> </li> </ul> ---------- css3 code ul { list-style-type:none; margin:0 auto; padding:0; overflow:hidden; } li { float:left } a:link,a:visited { display:inline-block; text-align:center; width:150px; font-weight:700; color:#FFF; background-color:#98bf21; padding:0; text-decoration:none; text-transform:uppercase} a:hover,a:active { background-color:#7A991A} p { font-family:Times,Times New Roman; font-size:12px; margin:0; position:absolute; top:50%; margin-right:50%} I want to center my menu but same is not happening, how to do it? Link to comment Share on other sites More sharing options...
davej Posted September 3, 2015 Share Posted September 3, 2015 Centering is done with margin: 0 auto or text-align: center. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted September 3, 2015 Share Posted September 3, 2015 This rul is probably the problem: ul { list-style-type:none; margin:0 auto; padding:0; overflow:hidden; ul is a block element and when no width is specified it defaults to width 100%. With width 100% there are no right an left margins. You need to specify the width to get the margins to have an impact. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 3, 2015 Share Posted September 3, 2015 Just wrap menu with nav element, give that text-align: center; then give outer main parent ul element/s display: inline-block; this will force it to wrap to content and because its using inline-block it will act like text and follow text align rule to centre itself. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now