0

Estoy teniendo un problema a la hora de centrar algo en el centro de la página, como podéis ver en el siguiente codepen https://codepen.io/alevidals/pen/gOLWexM tengo un texto que me gustaría centrar sin afectar al header. ¿Cómo podría conseguir este resultado? El texto que me gustaría centrar es el que dice: "Registrate o inicia sesión para coger cita", me gustaría que estuviera en el centro de la página (tanto vertical como horizontalmente). En la página final además del texto irán más cosas, pero querría saber como conseguir esto y ya luego le empiezo a añadir lo demás.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
#body {
  font-family: 'Roboto', sans-serif;
}
#menu-toggle:checked + #menu {
  display: block;
}
.bg {
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('https://pixabay.com/get/gf7622c0d4c53920496b6da3b5f755bc65d1c2d33233deb99759cdfcdec50bcc7baf7d8ddfc564cff1ac96fa99460ca4e_1920.jpg');

  background-size: cover;
}
</style>

  <div class="bg">
    <header
      class="lg:px-16 px-6 bg-white flex flex-wrap items-center lg:py-0 py-2"
    >
      <div class="flex-1 flex justify-between items-center">
        <a href="#" class="flex items-center hover:text-green-600">
          <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="logo" class="w-9" />
          <h2 class="ml-3 uppercase">Peluquería</h2>
        </a>
      </div>
      <label for="menu-toggle" class="cursor-pointer lg:hidden block">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <title>menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </label>
      <input type="checkbox" class="hidden" id="menu-toggle" />
      <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
        <nav>
          <ul
            class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0"
          >
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Inicio</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Citas</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Login</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Registrarse</a>
            </li>
          </ul>
        </nav>
        <a
          href="#"
          class="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 cursor-pointer"
        >
          <img
            src="https://randomuser.me/api/portraits/men/88.jpg"
            alt="user-img"
            class="rounded-full w-10 h-10 border-2 border-transparent hover:border-green-500"
          />
        </a>
      </div>
    </header>

    <div class="lg:px-16 px-6 mt-16">
      <h1 class="text-7xl uppercase font-extrabold text-center text-white">
        Registrate o inicia <br />
        sesión para coger cita
      </h1>
    </div>
  </div>

Gracias de antemano. Un saludo.

6
  • Hola... que texto deseas centrar? Si es "REGISTRATE O INICIA SESIÓN PARA COGER CITA" al menos a mi me aparece centrado. Sería un nuevo texto?
    – Claudio
    Commented el 17 feb. 2021 a las 12:28
  • @Israel-ICM ya lo he modificado, gracias!
    – alevidals
    Commented el 17 feb. 2021 a las 12:32
  • @Claudio he modificado la pregunta para que esté más claro
    – alevidals
    Commented el 17 feb. 2021 a las 12:32
  • @Israel-ICM El enlace que compartiste es el de cómo responder, este es el de cómo preguntar Commented el 17 feb. 2021 a las 12:53
  • tailwindcss.com/docs/vertical-align
    – Riddick
    Commented el 17 feb. 2021 a las 12:56

1 respuesta 1

0

Intenta colocandole una clase que contenga un display flex a tu div que contiene el h1 de la siguiente forma..

<div class="text-center-test lg:px-16 px-6">

Observación: debes quitarle el mt-16 que le asignaste y el background podrias asignarselo al body en general..

css

.text-center-test {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}

Aqui esta el resultado de tu codigo..

HTML

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

  <div class="bg">
    <header
      class="lg:px-16 px-6 bg-white flex flex-wrap items-center lg:py-0 py-2"
    >
      <div class="flex-1 flex justify-between items-center">
        <a href="#" class="flex items-center hover:text-green-600">
          <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="logo" class="w-9" />
          <h2 class="ml-3 uppercase">Peluquería</h2>
        </a>
      </div>
      <label for="menu-toggle" class="cursor-pointer lg:hidden block">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <title>menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </label>
      <input type="checkbox" class="hidden" id="menu-toggle" />
      <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
        <nav>
          <ul
            class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0"
          >
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Inicio</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Citas</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Login</a>
            </li>
            <li>
              <a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Registrarse</a>
            </li>
          </ul>
        </nav>
        <a
          href="#"
          class="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 cursor-pointer"
        >
          <img
            src="https://randomuser.me/api/portraits/men/88.jpg"
            alt="user-img"
            class="rounded-full w-10 h-10 border-2 border-transparent hover:border-green-500"
          />
        </a>
      </div>
    </header>

    <div class="text-center-test lg:px-16 px-6" >
      <h1 class="text-7xl uppercase font-extrabold text-center text-white">
        Registrate o inicia <br />
        sesión para coger cita
      </h1>
    </div>
  </div>

css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url('https://pixabay.com/get/gf7622c0d4c53920496b6da3b5f755bc65d1c2d33233deb99759cdfcdec50bcc7baf7d8ddfc564cff1ac96fa99460ca4e_1920.jpg');
  background-size: cover;
}

#body {
  font-family: 'Roboto', sans-serif;
}

#menu-toggle:checked + #menu {
  display: block;
}
.bg {
  height: 100vh;
  width: 100%;
}

.text-center-test {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}
3
  • Luego me cuentas si es lo que realmente querias o me avisas en que mas podria ayudar, saludos..
    – LuismGil
    Commented el 17 feb. 2021 a las 13:52
  • Ese código tiene el mismo "error" que me pasaba a mi, la página entonces ocupa más del 100vh que es lo que no quiero, no se si se podrá arreglar de alguna forma que no sea usando un calc() en la altura, gracias igualmente
    – alevidals
    Commented el 17 feb. 2021 a las 19:04
  • Creo que te entendí. Quieres que la pagina ocupe el 100vh sin usar la función calc().. Puedes hacerlo manual también. Agarras el height total del <div class="bg"> principal donde se encuentran tus elementos digamos que sea 604px le restas los 58 px del navbar que resultaria 604px - 58 px = 546px y se lo asignas al height del <div> donde se encuentra tu <h1> quedando la clase de la siguiente forma .text-center-test { align-items: center; display: flex; height: 546px; justify-content: center; } Ve si te funciona si de esa forma te funciona
    – LuismGil
    Commented el 18 feb. 2021 a las 8:53

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.