Fala galera, tudo bem?
Estou tentando praticar o aprendido nas aulas de HTML e CSS, utilizando o display:flex para montar um menu de navegação. Porem, ao utilizar a função, não consigo fazer com que o texto fique alinhado verticalmente na caixa li, sem forçar com o line-height.
Alguém saberia ajudar?
Codigo HTML:
<!DOCTYPE html>
<html lang="pt">
<html>
<head>
<meta charset="UTF-8">
<title>João da Silva - Desenvolvedor Web</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/stylesheet.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">
<img href="index.html" src="img/htmlecss.jpeg">
</h1>
<nav>
<ul class="menu-navegacao">
<li class="home current"><a href="index.html ">Home</a></li>
<li class="portifolio"><a href="index.html ">Portfolio</a></li>
<li class="sobre-mim"><a href="index.html ">Sobre mim</a></li>
<li class="blog"><a href="index.html ">Blog</a></li>
<li class="contato "><a href="index.html ">Contato</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>Codigo CSS:
body {
font-family: sans-serif;
line-height: 1.4;
width: 100%;
}
/*CABECALHO*/
header {
width: 80%;
margin: 0 auto;
text-align: center;
}
.logo img {
padding: 10px 0;
width: 30%;
}
.menu-navegacao {
display: flex;
height: 3em;
width: 100%;
}
.menu-navegacao li {
font-size: 1.2em;
text-transform: uppercase;
flex: 1 1 100%;
}
.menu-navegacao li:hover,
.menu-navegacao li:focus {
background-image: linear-gradient( to bottom, rgba(162, 211, 156, 1) 0, rgba(162, 211, 156, 1) 50%, rgba(162, 211, 156, 1) 90%, rgba(124, 197, 118, 1) 90%);
}
.menu-navegacao li:nth-child(n+2) {
border-left: 1px solid gray;
}
.menu-navegacao li a {
text-decoration: none;
color: black;
font-family: 'Roboto', sans-serif;
}Desde ja, agradeço pelo esforço ;)
