0

Estoy realizando mi primera pagina web y lo que intento hacer es centrar el icono que está en el menú de navegación y que se mantenga centrado al usarlo en cualquier dispositivo. Al estirar el navegador que siga estando centrado.

Un ejemplo claro de lo que quiero hacer lo pueden encontrar en la página oficial de Apple

.menu nav .logo {
  background-image: url("../contenido/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 140px;
  height: 45px;
  background-size: 140px;
  float: left;
  z-index: 998;
}
<header class="menu">
  <nav>
    <div class="botonMenu">
      <div class="rayaDelMenu"></div>
      <a class="logo" href="#"></a>
      <ul>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
      </ul>
  </nav>
</header>

3
  • No está muy claro lo que pretendes hacer, por favor publica una imagen de ese icono o de lo que quieras resolver
    – lromeraj
    el 30 mar. 2017 a las 5:18
  • Arevalo, mira esta pregunta, me lo recordaste con lo de Apple
    – lois6b
    el 30 mar. 2017 a las 6:30
  • Us los tamaños con % y no px. De esta manera te mantendra la relacion a la pantalla.
    – GDP
    el 21 jun. 2017 a las 13:42

3 respuestas 3

2

.menu nav .logo {
      background-image: url("../contenido/logo.png");
      width: 140px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
    }
<header class="menu">
  <nav>
    <div class="botonMenu">
      <div class="rayaDelMenu"></div>
      <a class="logo" href="#"></a>
      <ul>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
        <li><a href="#">Trabajo</a></li>
      </ul>
  </nav>
</header>

Es muy sencillo de solucionar con "Flexbox". Prueba con este CSS:

0

Simplemente debes añadir el estilo margin:auto, a tu div.botonMenu, asi que también el estilo display:inline-block. Para hacerlo exactamente igual a apple deberías usar media queries y ajustar la posición de los botones según el tamaño del dispositivo.

@media screen and (max-width:750px)
{
  /*Aqui pones el codigo para cuando la pantalla sea menos ancha que 750px*/
}`
0

pero para un centrado absoluto del logo, es conveniente hacerlo de forma absoluta, esto es, haciendo el logo position: absolute y dando un top y left del 50% para finalmente usar transform para invertir dicha cantidad, de tal modo que por el contraste se centre absolutamente, tanto horizontal como verticalmente.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.menu {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.15);
}

.menu nav .botonMenu {
  align-items: center;
  /display: flex;
  height: 50px;
  justify-content: space-between;
  line-height: 50px;
  padding: 0 15px;
  position: relative;
}

.menu nav .botonMenu .rayaDelMenu {
  color: #555;
  display: inline;
  float: left;
  height: 22px;
}

.menu nav .botonMenu .rayaDelMenu i {
  font-size: 22px;
  vertical-align: sub;
}

.menu nav .logo {
  background-image: url("http://i.imgur.com/7klrTiy.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  background-size: cover;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 998;
}

.menu nav ul {
  float: right;
}

.menu nav ul li {
  display: inline-block;
  padding: 0 12px;
}

.menu nav ul li a {
  color: #555;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  text-decoration: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<header class="menu">
  <nav>
    <div class="botonMenu">
      <div class="rayaDelMenu">
        <i class="material-icons">menu</i>
      </div>
      <a class="logo" href="#"></a>
      <ul>
        <li><a href="#">Usuarios</a></li>
        <li><a href="#">Preguntas</a></li>
        <li><a href="#">Ayuda</a></li>
      </ul>
    </div>
  </nav>
</header>

Para alinear el botón del menú y las opciones, puedes usar float o puedes hacerlo con flexbox como lo indica la otra respuesta: align-items: center; display: flex; height: 50px; justify-content: space-between;.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.