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; } 
