-1

tengo un error al centrar el footer...Así es como quiero que quede el footer:

Hello, I have an error when centering the footer...This is how I want the footer to look: introducir la descripción de la imagen aquí

Así es como queda: This is how it looks: introducir la descripción de la imagen aquí

CODE:

<!DOCTYPE html>
<html lang="es" data-theme="cupcake" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CarpiShop</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/output.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&family=Oswald:wght@200&display=swap" rel="stylesheet">
</head>
<body class="bg-indigo-900 grid grid-cols-2 min-h-full min-w-full">
    
    <div>
        <header>
            <h1 class="text-white font-body text-2xl p-5">Shop Story</h1>
        </header>
        <nav class="grid place-content-start m-10 p-10">
            <button class=" btn btn-primary m-2 p-2  text-white font-display   bg-indigo-900 border-0"><i class="bi bi-inbox m-1 p-1"></i>Todos los productos</button>
            <button class=" btn btn-primary m-2 p-2  text-white font-display  bg-indigo-900 border-0"><i class="bi bi-1-circle m-1 p-1"></i>Abrigos</button>
            <button class=" btn btn-primary m-2 p-2  text-white font-display  bg-indigo-900 border-0"><i class="bi bi-2-circle-fill m-1"></i>Camisetas</button>
            <button class="btn btn-primary m-2 p-2  text-white font-display   bg-indigo-900 border-0"><i class="bi bi-3-circle m-1 p-1"></i>Pantalones</button>
            <button class=" btn btn-primary m-2 p-2  text-white font-display   bg-indigo-900 border-0  "><i class="bi bi-bag-fill m-1 p-1"></i>Carrito</button>
        </nav>
    </div>

    <div>
        <main>
            <h1>Hola</h1>
        </main>
    </div>
    <div class="col-span-2">
        <footer class="bg-black text-center justify-center justify-items-center justify-self-center content-center min-h-full min-w-full ">
            <h1 class="text-yellow-500   ">Pagina vanilla HTML + CSS + JS</h1>
        </footer>
    </div>
    <script src="./js/main.js"></script>
</body>
</html>

He usado css Grid para maquetar la página, pero ahora no sé cómo centrar la parte final de la página

I have used css Grid to layout the page, but now I don't know how to center the bottom part of the page

1
  • Hola! Has estado usando bootstrap o tailwind. El título de tu pregunta hace referencia a bootstrap, pero no tu código. Commented el 13 feb. 2023 a las 20:27

1 respuesta 1

0

podrias agregar la propiedad flex al footer y quedaria como quieres, le agregue flex al código y le removí varias propiedades, fijate

<footer class="bg-black text-center justify-center items-center flex h-52">
    <h1 class="text-yellow-500">Pagina vanilla HTML + CSS + JS</h1>
</footer>

prueba eso y para cambiar el alto del footer modifica el h a los niveles que quiere

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.