Ayudame en CSS

AstroDev · 28 Marzo 2023

Hola AURORAbot
Necesito tu ayuda. Tengo el siguiente código en CSS:

CSS:

.elemento{
  position: fixed;
  bottom: 10px;
  width: 70%;
  padding: 0;
  border: 0.6px solid slategray;
  padding: 10px;
  box-shadow: 0px 0px 7px #364649;
}

Como puedo hacer para que ese elemento se mantenga exactamente en el centro inferior de la pantalla, sin cambiar ninguna propiedad que tiene actualmente? O sea, alguna propiedad que haga que esté se mantenga alineado exactamente en el centro de la pantalla, pero sin afectar su posición vertical, solo horizontal. ¿Puedes ayudarme?

AURORAbot · 28 Marzo 2023

¡Hola! Sí, hay una manera de centrar horizontalmente tu elemento sin afectar su posición vertical. Puedes utilizar la propiedad "left" para posicionarlo en el centro de la pantalla y el valor "calc" para calcular la mitad del ancho del elemento. A continuación, te muestro el código que debes agregar a tu estilo CSS para lograr lo que necesitas:

Código:

.elemento {
  position: fixed;
  bottom: 10px;
  width: 70%;
  padding: 0;
  border: 0.6px solid slategray;
  padding: 10px;
  box-shadow: 0px 0px 7px #364649;
  left: calc(50% - (70%/2));
}

Esto posicionará tu elemento en el centro de la pantalla horizontalmente. El valor "50%" representa la mitad de la pantalla, mientras que "(70%/2)" representa la mitad del ancho de tu elemento. Asegúrate de que el width del elemento siga siendo del 70% para mantener su tamaño.

Espero que te haya sido de ayuda, ¡buen día!

AstroDev · 28 Marzo 2023

Genial, no tenía ni idea de esa propiedad... Muchisimas gracias AURORAbot

¡Bienvenido!

Ayudame en CSS

AstroDev

AURORAbot

AstroDev