0

Tenho esta navbar e gostaria de centralizar o item 2

inserir a descrição da imagem aqui

ul.navigation {
  width: auto;
  height: 40px;
  position: relative;
  background-color: #fcfcfc;
  padding: 0;
  color: #b5121b;
  list-style-type: none;
  box-shadow: 0 3px #ececec;
  margin: 0;
  z-index: 1;
}
ul.navigation > a > li {
  list-style-type: none;
  display: inline-block;
  height: 40px !important;
  padding: 10px 20px 0px 20px;
  margin: 0;
  max-height: 30px;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li:hover {
  background-color: #f2f2f2;
  cursor: pointer;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li {
  color: #b5121b;
}
<ul class="navigation">
  <a href="#"><li>ITEM 1</li>
  </a>
  <a href="#">
    <li class="center">ITEM 2</li>
  </a>
  <a href="#">
    <li>ITEM 3</li>
  </a>
</ul>

4
  • 2
    centralizar em relação a quê ?
    – MagicHat
    Commented 1/12/2016 às 17:47
  • Colocar no centro da navbar, como se fosse um float: center Commented 1/12/2016 às 17:54
  • O item1 tem quer ficar left, o 2 center e o 3 right?
    – Syzoth
    Commented 1/12/2016 às 18:08
  • O Item 1 já está no lugar certo, o 2 tem que ficar no center e o 3 no right (o 3 eu já consegui, só preciso colocar o 2 no center) Commented 1/12/2016 às 18:12

1 Resposta 1

3

O uso do LI está errado, LI é sempre filho de UL, não pode existir uma tag entre eles.

Fora ajustar isso, você deve fixar a largura, no caso parece que são apenas 3 itens, então 32% para cada um deve funcionar bem e trocar display: inline-block; por float.

O elemento que fica no centro auto "alinha" entre ambos, mas para causar o efeito de centralização terá que ajustar margin-left e margin-right com a largura do dos elementos na esquerda e direita respectivamente, se a largura é 32% você pode aplicar margin: 0 32%;

Se tiver 4 elementos basta recalcular, os elementos ficarão com 25% ou 24% (teste pois 25% pode quebrar) e o elemento do centro deverá passar a usar float ao invés de margin-left e margin-right para alinhar.

Nota: para 3 elementos você poderia usar 33%, mas talvez precise de box-sizing: border-box; para ajustar juntos com as bordas ou outros espaçamentos.

ul.navigation {
  width: auto;
  height: 40px;
  position: relative;
  background-color: #fcfcfc;
  padding: 0;
  color: #b5121b;
  list-style-type: none;
  box-shadow: 0 3px #ececec;
  margin: 0;
  z-index: 1;
}
ul.navigation > li {
  list-style-type: none;
  margin: 0;

  width: 32%;
  text-align: center;

  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > li:hover {
  background-color: #f2f2f2;
  cursor: pointer;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > li {
  color: #b5121b;
}
ul.navigation > li > a {
  display: block;
  max-height: 30px;
  height: 40px !important;
  padding: 10px 20px 0px 20px;
}
ul.navigation > li.left {
  float: left;
}
ul.navigation > li.right {
  float: right;
}
ul.navigation > li.center {
  margin: 0 32%;
}
<ul class="navigation">
  <li class="left">
       <a href="#">ITEM 1</a>
  </li>
  <li class="right">
       <a href="#">ITEM 3</a>
  </li>
  <li class="center">
       <a href="#">ITEM 2</a>
  </li>
</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .