I can't align the logo with the menu icon

Question

I can't align the logo with the menu icon

I'm not getting to align the logo with the icon menu, what can it be?

/*
font-family: 'Oswald', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*reset*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*header*/
.header { 
	padding: 2px 0;
}
.header .container {
	display: flex;
	align-items: baseline;
}

.logo {
	margin-left: -15px;
}
.icon-menu {
	display: block;
	width: 40px;
	height: 40px;
	font-size: 25px;
	cursor: pointer;
	color: #3f4040;
	margin-left: auto;
}
/*menu*/
.nav {
	position: absolute;
	top: 95px;
	left: -100%;
	width: 100%;
	transition: all 0.4s;
}
.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav ul li a {
	font-family: 'Open Sans', sans-serif;
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #777;
	border-bottom: 1px solid #ccc;
}
.mostrar {
	left: 0;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sistemas de Informação - FAPAN</title>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald:300,400,700" rel="stylesheet">
	<link rel="stylesheet" href="assets/css/normalize.css">
	<link rel="stylesheet" href="assets/css/fapan.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<header class="header">
		<class class="container">
			<h1 class="logo"><img src="assets/img/logo.png" alt="logo"></h1>
			<i class="fa fa-bars icon-menu" id="btn-menu"></i>
			<nav class="nav" id="nav">
				<ul>
					<li><a href="#">Sobre o Curso</a></li>
					<li><a href="#">Professores</a></li>
					<li><a href="#">Grade</a></li>
					<li><a href="#">Galeria</a></li>
					<li><a href="#">Alunos</a></li>
				</ul>
			</nav>
		</class>
	</header>
	<script src="assets/js/index.js"></script>
</body>
</html>

1

html css menu logo

Author: Lucas R, 2017-03-23

Source

1 answers

score 0 · Answer 1

The first thing you will need to understand is how the elements organize themselves in the browser, there are various forms and alignment techniques.

I will show an example with display: table:

<header class="header">
   <div class="col">
     <h1 class="logo">logo</h1>
   </div>
   <div class="col icone">  
     <i class="fa fa-bars icon-menu" id="btn-menu"></i>
   </div>
</header>

.header{
  display: table;
  width: 100%;
}

.col{
  display: table-cell;
  vertical-align: middle;
}

.col.icone{
  text-align: right;
}

Note In this example that the one responsible for aligning the elements horizontally is the column display: table-cell with vertical-align: middle

In your case you are using display: flex which makes it a little easier.. to solve practically I had to use align-items: baseline; align-items: center; See:

/*
font-family: 'Oswald', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*reset*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*header*/
.header .container {
	display: flex;
	align-items: baseline;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 10px;
  background-color: #ddd;
}

.logo {
  display: inline-block;
}
.icon-menu {
	display: inline-block;
	font-size: 25px;
	cursor: pointer;
	color: #3f4040;
	margin-left: auto;
}
/*menu*/
.nav {
	position: absolute;
	top: 95px;
	left: -100%;
	width: 100%;
	transition: all 0.4s;
}
.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav ul li a {
	font-family: 'Open Sans', sans-serif;
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #777;
	border-bottom: 1px solid #ccc;
}
.mostrar {
	left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<header class="header">
  <div class="container">
    <h1 class="logo">
      <img src="assets/img/logo.png" alt="logo">
    </h1>
    <i class="fa fa-bars icon-menu" id="btn-menu"></i>
    <nav class="nav" id="nav">
      <ul>
        <li><a href="#">Sobre o Curso</a></li>
        <li><a href="#">Professores</a></li>
        <li><a href="#">Grade</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Alunos</a></li>
      </ul>
    </nav>
  </div>
</header>