Menu text not vertically centered mobile

I have vertically and horizontally aligned the text in their color boxes on the website I’m working on
but when viewed on a mobile device (iphone 7 chrome and safari browsers), the font is not centered in their color boxes. How do I get them vertically centered in mobile browser?

I am currently using the custom code below

#menu-main {
	vertical-align: bottom;
	margin-top: 35px;

.nav.navbar-nav > li > a {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
  text-align: center;
  line-height: 100%;

.nav > li > a {
	text-transform: none;
	font-size: medium;


.navbar-default .navbar-nav > li > a {
	text-transform: lowercase;
	font-size: large;
	font-family: 'AgendaMedium';
	display: table-cell;
    vertical-align: middle;
    top: -5px;

.services a {
	background-color: #c1272d;
	width: 100px; 
 } (same code is used for all top menu items with the different colors)

Hi @daniellefran,

I hope you are well today and thank you for your question.

It is displaying centre aligned for me as shown in the attached screenshot.

Please try clearing your browser cache.

Best Regards,

Sorry, I meant horizontally centered. I’m trying to get it perfectly in the middle on all sides. I’ve cleared the caches on the site and on my phone so I still don’t know why it’s not working.

Still i am getting it centre aligned as shown in my above screenshot and not which you have displayed in your shared screenshot.

Which browser are you using?

Could you please test it using different browser?

I have been using Chrome and Safari on my iPhone 7 and the screen shots are below. On the regular desktop version of Chrome it is showing up properly and everything is perfectly centered. The problem seems to be isolated to mobile phones only.

What browser are you using on which platform?

I am using chrome browser on android mobile.

I will check it on iPhone and revert back to you.