¿Cómo me centro esta barra de navegación con los enlaces y elementos desplegables?

votos
-1

Estoy tratando de encontrar la manera de centrar la barra de navegación que contiene enlaces y elementos desplegables. Soy capaz de obtener los enlaces centradas por sí mismos y los elementos desplegables centradas por sí mismos, pero cuando se trata de llegar a todos ellos centrados en conjunto aparecen centrados horizontalmente pero no verticalmente. Actualmente se ven así alineado a la izquierda . Cuando cambio los flotadores a ninguna (y añadir a la flexión como se sugiere) me sale éste inadecuadamente centrada .

.navbar {
  overflow: hidden;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  background-color: #666666;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  padding: 14px 16px;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  padding: 12px 16px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class=navbar>
  <a href=#>a</a>
  <div class=dropdown>
    <button class=dropbtn>b</button>
    <div class=dropdown-content>
      <a href=#>1</a>
      <a href=#>2</a>
    </div>
  </div>
  <div class=dropdown>
    <button class=dropbtn>c</button>
    <div class=dropdown-content>
      <a href=#>3</a>
      <a href=#>4</a>
    </div>
  </div>
  <a href=#>d</a>
</div>

Publicado el 27/11/2018 a las 16:52
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Se puede utilizar flex para el caso ...

.navbar {
  overflow: hidden;
  display: flex;
  justify-content:center;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  background-color: #666666;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  padding: 14px 16px;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  padding: 12px 16px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="navbar">
  <a href="#">a</a>
  <div class="dropdown">
    <button class="dropbtn">b</button>
    <div class="dropdown-content">
      <a href="#">1</a>
      <a href="#">2</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">c</button>
    <div class="dropdown-content">
      <a href="#">3</a>
      <a href="#">4</a>
    </div>
  </div>
  <a href="#">d</a>
</div>

Respondida el 27/11/2018 a las 16:57
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more