How to center list items in flex box navigation bar?
Multi tool use
I have the following code:
http://jsfiddle.net/0jh3fud9/2/
How do I center the list items ("LOGO", "REGISTER" "LOGIN", "SEARCH") within the border they are in?
Try adding the commented CSS rules to your li elements (see updated fiddle):
This will make each of the list items also behave as a flex item and will center them horizontally and vertically in their parent.
What you should do is declare your elements as a flex container as you've done.
Add the align-items: center; and justify-content: center; properties to them, but you don't really do that here, since there is no space in where you could center anything hence it doesn't know what to center it to.
Remove flex: 1; and I recommend adding padding: 10px; and a margin: 5px; and it should work. If you want them to be close to each other then only add padding.
P.S. you could also use a text-align: center;
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
