Hi. I’m trying to center list items inside a nav bar with no luck.
I’ve tried the solution here:
which is to create a parent and do something similar to the following:
div.parent {
text-align: center;
}
ul {
display: inline-block;
text-align: left;
}
I created a parent div just to try this method but it doesn’t seem to work.
Here’s the pen
https://codepen.io/RutherfordTheBrave/pen/wvzBNBj
hey @Rutherford
I studied your codepen here is what I did and it worked
#navbar ul
{
text-align : center;
}
have a good day
1 Like
I forgot to say I want to center the elements but make the text left justified.
You can use the following for the #list-container
selector:
#list-container {
background-color: white;
display: flex;
justify-content: center;
}
and simplify the #navbar ul
selector to be:
#navbar ul {
list-style-position: outside;
list-style-type: none;
padding: 1px;
text-align: left;
}
1 Like