Jump to content

CSS3 - Trying to center a menu.


Recommended Posts


Hello. I'm trying to do a BASIC (see above site for example) navigation on my site - Its working fine, however the div/container fills 100% of the width of the screen. 

Has anyone got an example of how to do a navigation - But if the text/wording does NOT fill up the entire width of the screen - it automatically centers.  

Ive used width:auto; and text-align center etc - but nothing works.


I CAN make the div smaller (say 50%), and the text is centered, But if i add more menu items, the text word-wraps for half the screen instead of going the full width of the screen.


ALSO, who / how do we contact the designers of the above website to add an example of how to center a menu. 


SO FAR i have:


<div class="w3-display-container" style="width:75%; margin-left: auto;
  margin-right: auto; text-align: center;">
  <div class="w3-bar w3-display-topmiddle">
  <span class="w3-bar-item">Select a letter: &nbsp; </span>
  <a href="/letter/p" class="w3-bar-item w3-button w3-mobile">p</a>
  <a href="/letter/r" class="w3-bar-item w3-button w3-mobile">r</a>
  <a href="/letter/w" class="w3-bar-item w3-button w3-mobile">w</a>




Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...