Centering the text inside the navigation box - html

Question

I'm working on a navigation menu and right now I'm trying to center the text both horizontally and vertically inside the boxes.
Here is how my navigation looks like right now:
Here is how I want it to be:
This is my code (I'm using Umbraco):
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{ var home = CurrentPage.Site(); }
#if (home.Children.Any())
{
// Get the first page in the children
var naviLevel = home.Children.First().Level;
// Add in level for a CSS hook
<ul class="meny level-#naviLevel">
// For each child page under the home node
#foreach (var childPage in home.Children)
{
if (childPage.Children.Any())
{
<li class="dropdown has-child #(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
#if (childPage.DocumentTypeAlias == "Huvudmeny")
{
<span>#childPage.Name</span>
#childPages(childPage.Children)
}
else
{
#childPage.Name
}
#helper childPages(dynamic pages)
{
// Ensure that we have a collection of pages
if (pages.Any())
{
// Get the first page in pages and get the level
var naviLevel = pages.First().Level;
// Add in level for a CSS hook
<ul class="meny dropdown-menu sublevel level-#(naviLevel)">
#foreach (var page in pages)
{
<li>
#page.Name
//if the current page has any children
#if (page.Children.Any())
{
// Call our helper to display the children
#childPages(page.Children)
}
</li>
}
</ul>
}
}
</li>
}
else
{
<li class="#(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
#childPage.Name
</li>
}
}
</ul>
}
css:
nav {
z-index: 999;
background: rgba(0, 0, 0, 0.95);
text-align: right;
left: 0px;
right: 0px;
display: block;
position: relative;
transition: height 300ms ease-in-out;
text-align:center;
}
nav > ul {
padding: 5px;
position: relative;
display: inline-table;
width: 100%;
}
nav > ul li {
position: relative;
font-family: "Lato", sans-serif;
}
.nav a {
display: inline-block;
}
nav > ul li a,
nav > ul li span {
cursor: pointer;
display: inline-block;
padding: 40px;
padding-top: 5px;
font-size: 20px;
font-weight: 500;
color: #000000;
border-right: 1px solid #000000;
}
nav > ul li a:hover,
nav > ul li span:hover {
color: #0066FF;
}
nav > ul li span {
cursor: default;
}
nav > ul li:after {
content: "";
clear: both;
display: block;
}
nav > ul li.selected > a,
nav > ul li.selected span {
color: #000000;
font-weight: 700;
}
nav li > ul {
position: absolute;
}
nav li > ul li {
float: none;
display: block;
position: relative;
}
nav li > ul li a {
font-size: 17px;
padding: 15px 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
nav li > ul li a:hover {
color: #fff;
}
nav li > ul > li > ul {
left: 100%;
top: 0;
display: none;
}
nav {
margin: 0 auto;
background: none;
width: 100%;
}
nav > ul {
padding-right: 0;
width: auto;
text-align: center;
}
nav > ul li {
float: left;
}
nav > ul li a,
nav > ul li span {
font-size: 15px;
}
nav > ul li:last-child a {
padding-right: 0;
}
nav li > ul {
left: 0;
top: 75%;
display: none;
white-space: nowrap;
height: auto;
margin-bottom: 0;
margin-left: 10px;
text-align: left;
background: rgba(0, 0, 0, 0.8);
padding: 5px 8px 5px 0;
}
nav li > ul li a {
padding: 8px 15px;
font-size: 15px;
color: rgba(255, 255, 255, 0.8);
}

Answer 1

You should remove the padding-top and decrease the padding from the
nav > ul li a, nav > ul li span.
nav > ul li a, nav > ul li span {
cursor: pointer;
display: inline-block;
padding: 14px; /* decrease padding */
/* padding-top: 5px; */
font-size: 20px;
font-weight: 500;
color: #000000;
border-right: 1px solid #000000;
}

Answer 2

You can use this css to make layout as per reference image(you need to change height and font-size and color as per your design)
nav > ul li {
background: #fff none repeat scroll 0 0;
color: #000;
font-size: 18px;
margin: 0;
text-align: center;
padding: 0 15px;
height: 30px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}