2

Quiero poner una imagen .png que seria mi logo y el menu de navegacion a lado de este, pero no logro centrar el texto y la imagen, ¿Alguien puede ayudarme? Gracias.

tengo los contenedores y todo quiero alinear el logo y el nav y que queden un poco mas junto las dos cosas, estoy usando grid, como le puedo hacer

    html {
        box-sizing: border-box;
        font-size: 62.5%;
    }
    
    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }
    
    body {
        font-size: 1.6rem;
        line-height: 2;
        background-image: url("../img/35.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .contenedor {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    img {
        max-width: 100%;
    }
    
    .centrar-texto {
        text-align: center;
    }
    
    .productos a {
        text-decoration: none;
        color: white;
        font-size: 2.5rem;
        font-family: 'Public Sans';
        margin-left: 2rem;
    }
    
    .logo {
        width: 40rem;
        height: 40rem;
        margin: 0;
        height: 100px;
    }
    
    .navegacion {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Public+Sans:400,700&display=swap" rel="stylesheet">
    <title>Raspados Isla</title>
</head>

<body>

    <header class="barra-nav ">
        <main class="navegacion centrar-texto">
            <a href="#" class="logo">
                <img src="/img/logoo.png" alt="Logo">
            </a>
            <nav class="productos">
                <a href="raspados.html">Raspados</a>
                <a href="tejuino.html">Tejuino</a>
                <a href="tuba.html">Tuba</a>
                <a href="tepache.html">Tepache</a>
                <a href="cerveza-raiz.html">Cerveza de Raíz</a>
            </nav>
        </main>

    </header>

</body>

</html>

2 respuestas 2

0

La solución mas rapida seria meter la imagen dentro de la class de productos, aunque no es la mas adecuada, te dejo el ejemplo:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Public+Sans:400,700&display=swap" rel="stylesheet">
    <title>Raspados Isla</title>
</head>

<body>

    <header class="barra-nav ">
        <main class="navegacion centrar-texto">
            <nav class="productos">
              <a href="#" class="logo">
                <img src="/img/logoo.png" alt="Logo">
            </a>
                <a href="raspados.html">Raspados</a>
                <a href="tejuino.html">Tejuino</a>
                <a href="tuba.html">Tuba</a>
                <a href="tepache.html">Tepache</a>
                <a href="cerveza-raiz.html">Cerveza de Raíz</a>
            </nav>
        </main>

    </header>

</body>

</html>

Otra solución seria en el css modificar los parámetros de la class logo.Te dejo este pequeño resumen, espero que te ayude! Un saludo :) http://joaquin.medina.name/web2008/documentos/informatica/lenguajes/HTML/CSS/2010_08_21_CSS_CentrarImagen.html

1
  • Gracias! Lo voy a intentar
    – Jorge
    Commented el 19 nov. 2019 a las 20:19
0

Se me ocurre que lo hagas de este modo:

  • Tanto tu imagen como tu menú envuélvelos dentro de un contenedor principal, por ejemplo un div
  • A ese contenedor le indicas que se dividirá en 2 y tendrá un display grid
  • Al contenedor que engloba el menú le indicas un ancho mínimo de 80% sobre el viewport
  • Al contenedor del menú le indicamos que tenga un display: flex;
  • Con flex-grow a 1 indicamos cuanto debe crecer cada elemento del menú
  • Sólo coloca el enlace a una imagen válida donde yo dejo la tag img vacía por ejemplo de 30*30px para que notes el efecto

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        .menu-principal {
          display: grid;
          grid-template-columns: repeat(2, 1fr);      
        }
        .menu {
          display: flex;
          background-color: black;
          list-style: none; 
          padding: 0;
          text-align: center;  
          min-width: 80vw;
        }
        
        .elementos {
          flex-grow: 1;
          color: white;     
        }
    
      </style>
    </head>
    <body>
    <div class="menu-principal">
      <img src="rutaatuimagen" alt="">
        <ul class="menu">
          <li class="elementos">1</li>
          <li class="elementos">2</li>
          <li class="elementos">3</li>
          <li class="elementos">4</li>
        </ul>
    </div>
    </body>
    </html>

2
  • Si es bueno mezclar flexbox con grid? Y puedes recomendarme algun articulo o libro para aprender mas sobre el tema? Gracias.
    – Jorge
    Commented el 19 nov. 2019 a las 20:28
  • Ya puse las nuevas lineas, pero el texto y la imagen siguen sin alinearse completamente ¿Como puedo alinear eso bien? Gracias por la ayuda!
    – Jorge
    Commented el 19 nov. 2019 a las 20:47

Tu Respuesta

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

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