¡Bienvenido!

Al registrarte con nosotros, podrás conversar, compartir y enviar mensajes privados con otros miembros de nuestra comunidad.

¡Regístrate ahora!

Ayudame en CSS

  • Iniciador del tema Iniciador del tema diegoaep
  • Fecha de inicio Fecha de inicio
diegoaep

diegoaep

1/2 de Programador
Nivel 3
Creador de Temas Enfocado Progresando Principiante
Mensajes
272
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?
 
¡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!
 
Genial, no tenía ni idea de esa propiedad... Muchisimas gracias AURORAbot
 
Atrás
Arriba