Move text up with CSS

I know this can be off topic but i can't align test in center (vertical align). This is my menu code:

<nav> <ul> <li><a href="#"> <i aria-hidden="true"></i><strong>Home</strong></a></li> <li><a href="#"><i aria-hidden="true"></i><strong>Sign Out</strong></a></li> </ul> <a href="#"><i></i></a>
</nav>

and i tried different ways to center Home and Sign Out vertically (should be in a midle of icon) but unsuccessfully.

 .home-text{
// wont't work padding-top: 30px;
// wont't work padding-bottom: 30px;
// also i tried with top:10px etc.
}

jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery(this).toggleClass('active'); jQuery('.menu ul').toggleClass('active'); e.preventDefault(); });
});

/*----- Toggle Button -----*/
.toggle-nav { display: none;
}
/*----- Menu -----*/
@media screen and (min-width: 860px) { .menu { width: 100%; padding: 10px 0px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); border-radius: 3px; background: #4CAF50; }
}
.menu ul { display: inline-block;
}
.menu li { margin: 0px 50px 0px 0px; float: left; list-style: none; font-size: 17px;
}
.menu li:last-child { margin-right: 0px;
}
.menu a { text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); color: #FFFFFF; text-decoration: none; transition: color linear 0.15s;
}
.menu a:hover,
.menu .current-item a { text-decoration: none; color: #FFFFFF;
}
/*----- Search -----*/
.search-form { float: right; display: inline-block;
}
/*----- Responsive -----*/
@media screen and (max-width: 1150px) { .wrap { width: 90%; }
}
@media screen and (max-width: 860px) { .menu { width: 100%; position: relative; display: inline-block; } .menu ul.active { display: none; } .menu ul { position: absolute; top: 90%; left: 0px; padding: 10px 10em 0em 2em; /* menu width */ border-radius: 7px; background: #4CAF50; } .menu ul:after { width: 0px; height: 0px; position: absolute; top: 0%; left: 22px; content: ''; transform: translate(0%, -100%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #303030; } .menu li { margin: 5px 0px 5px 0px; float: none; display: block; } .menu a { display: block; } .toggle-nav { padding: 20px; /* squere element size */ float: left; display: inline-block; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); border-radius: 4px; background: #4CAF50; color: #FFFFFF; font-size: 25px; transition: color linear 0.15s; font-weight: bold; } .toggle-nav:hover, .toggle-nav.active { text-decoration: none; color: #FFFFFF; }
}
.home-text { color: red; padding-top: 30px; padding-bottom: 30px; display: inline-block; vertical-align: top;
}

<script src=""></script>
<link rel="stylesheet" href="">
<nav> <ul> <li> <a href="#"> <i aria-hidden="true"></i><strong>Home</strong></a> </li> <li><a href="#"><i aria-hidden="true"></i><strong>Sign Out</strong></a></li> </ul> <a href="#"><i></i></a>
</nav>

5 Answers

Just add vertical-align: middle to the li's, like this, and it will work fine

.menu li * { vertical-align: middle;
}

Sample snippet

.menu li { list-style-type: none;
}
.menu li * { vertical-align: middle;
}

<link rel="stylesheet" href="">
<nav> <ul> <li><a href="#"> <i aria-hidden="true"></i><strong>Home</strong></a></li> <li><a href="#"><i aria-hidden="true"></i><strong>Sign Out</strong></a></li> </ul> <a href="#"><i></i></a>
</nav>

 .home-text, .sign-out-text{ display: inline-block; padding-bottom: 25px; vertical-align: middle; padding-left: 10px;
}

<link rel="stylesheet" href="">
<nav> <ul> <li><a href="#"> <i aria-hidden="true"></i><strong>Home</strong></a></li> <li><a href="#"><i aria-hidden="true"></i><strong>Sign Out</strong></a></li> </ul> <a href="#"><i></i></a>
</nav>

Try this, set inline-block and vertical-align: middle; to .fa

.menu li .fa{ display: inline-block; vertical-align: middle;
}

<link rel=stylesheet href=
<nav> <ul> <li><a href="#"> <i aria-hidden="true"></i><strong>Home</strong></a></li> <li><a href="#"><i aria-hidden="true"></i><strong>Sign Out</strong></a></li> </ul> <a href="#"><i></i></a>
</nav>

Try this. Use display: table for parent class and display: table-cell and vertical-align: middle for child class. I have set the height for displaying the content

 <!DOCTYPE html>
<html>
<head>
<title>Demo Project</title>
<style> ul li { height: 100px; background: grey; display: table; border: 1px solid white; width: 200px; } ul li a { display: table-cell; vertical-align: middle; }
</style>
</head>
<body>
<nav> <ul> <li> <a href="#"> <i aria-hidden="true"></i><strong>Home</strong></a> </li> <li><a href="#"><i aria-hidden="true"></i><strong>Sign Out</strong></a></li> </ul> <a href="#"><i></i></a>
</nav>
</body>
</html>

Parent element should have position property set as relative, and then inner element positio n set to absolute, and properties top, bottom, left, right set to 0

So in your case:

.current-item { position: relative
}
.home-text{ position: absolute; top: 0; bottom: 0; right: 0; left: 0;
}