I’m using the storefront theme with wordpress, and for the life of me, I can’t align the menu items text into the center.

Here is the code I’ve used so far:

.main-navigation ul {
   line-height: 7;
}

.main-navigation ul li {
  border-right: 1px solid #ff63b1;
  padding-right: 30px;
}

.main-navigation ul.nav-menu li a {
   padding: 1em 1em;
 }

I used the line: text-align: center; with all these but no difference.

Its worth noting, that I used product categories instead of normal menu items here as I found it more useful. Website: http://cutepinkboutique.com if you want to check the code for the main navigation

Here what it looks like so far: Screenshot here

Im banging my head against the wall and can’t figure this out. Any help would be great.

Read more here: Aligning Main Navigation Product Categories


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: