I have a menu with 3 icons: the first on the left and the third on the right. I need the second to be in the center

Asked

Viewed 24 times

1

I’m making a responsive site, starting with the menu, but I’m having the following problem:

So, I need the icon that is on the side of the first, to be in the middle, in a way that is centralized also for the Mobile version.

Code:

   /* =============== RESET =============== */

* {
  font-family: 'Lato', sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: 300;
  font-size: 100%;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
}

body {
  background-color: #f5f5f5;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

i {
  color: white;
}


/* =============== HEADER =============== */

button i:hover {
  color: #D8D8D8;
}

.cabecalho {
  padding: 3% 4%;
  width: 100%;
  float: left;
  background: black;
  position: fixed;
  opacity: 0.8;
}

.menu {
  background: black;
  text-align: center;
  width: 56px;
  height: 56px;
  float: left;
  color: #fff;
  font-size: 1.8em;
}

.loja {
  background: black;
  color: white;
  text-align: center;
  width: 56px;
  height: 56px;
  font-size: 1.8em;
}

.pesquisar {
  background: black;
  float: right;
  color: white;
  text-align: center;
  width: 56px;
  height: 56px;
  font-size: 1.8em;
}
 <!DOCTYPE html>
<html lang="PT-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alpha Tech - Eletrônica e Informática</title>
  <link rel="shortcut icon" href="data/logos/favicon.png">

  <meta name="keywords" content="alpha tech, loja, informatica, eletronica, conserto, reparo, tecnico">

  <meta name="description" content="Faça seu orçamento! Consertamos Celulares, Tablet's, Notebook's, Monitores e muito mais! Vendemos também vários produtos relacionados a Eletrônica e Informática, entre em nossa loja virtual!">
  <meta name="author" content="Vander Pires de Oliveira">
  <meta name="copyright" content="Copyright © Alpha Tech">
  <meta name="robots" content="index, follow">


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonimous">
  <link rel="stylesheet" href="_css/style.css">

  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

</head>

<body>
  <header class="cabecalho">
    <button class="menu">
				<a href=""><i class="fas fa-bars fa-lg"></i></a>
			</button>

    <button class="loja">
				<a href=""><i class="fas fa-store fa-lg"></i></a>
			</button>

    <button class="pesquisar">
				<a href=""><i class="fas fa-search fa-lg"></i></a>
			</button>
  </header>
</body>

</html>

javascript html css

1 answer

2


There are some different ways to do this, but the most practical is to put display:flex in the content box in which icons are inside and use the property justify-content: space-between; to distribute the icons within the container. As you only have 3 icons will stay one on the left, one in the center and the other on the right.

inserir a descrição da imagem aqui

Follow the code referring to the image above.

OBS 1: Using display:flex in the father you no longer need float in children.

OBS 2: The height of the bar varies because you put your padding in %, if it is in PX you won’t have this "problem"

* {
  font-family: 'Lato', sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: 300;
  font-size: 100%;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
}

body {
  background-color: #f5f5f5;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

i {
  color: white;
}


/* =============== HEADER =============== */

button i:hover {
  color: #D8D8D8;
}

.cabecalho {
  padding: 3% 4%;
  width: 100%;

  background: black;
  position: fixed;
  opacity: 0.8;
  /* propriedades para fazer o alinhamento  */
  display: flex;
  justify-content: space-between;
}

.menu {
  background: black;
  text-align: center;
  width: 56px;
  height: 56px;

  color: #fff;
  font-size: 1.8em;
}

.loja {
  background: black;
  color: white;
  text-align: center;
  width: 56px;
  height: 56px;
  font-size: 1.8em;
}

.pesquisar {
  background: black;
  
  color: white;
  text-align: center;
  width: 56px;
  height: 56px;
  font-size: 1.8em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonimous">


<header class="cabecalho">
  <button class="menu">
      <a href=""><i class="fas fa-bars fa-lg"></i></a>
    </button>

  <button class="loja">
      <a href=""><i class="fas fa-store fa-lg"></i></a>
    </button>

  <button class="pesquisar">
      <a href=""><i class="fas fa-search fa-lg"></i></a>
    </button>
</header>

  • 1

    Thanks! It worked here the way you wanted it...

  • 1

    @zAllan without problems my dear!

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.