¿Cómo establecer la posición relative 50% 50% usando JS?Configuración de la posición CSS utilizando Javascript
me trataron:
document.getElementById("id").style.position = "relative 50% 50%";
pero no parece funcionar ...
Tienes que hacerlo de forma individual.
Hice una variable para apuntar al objeto style, porque estamos modificando más de una propiedad y porque with() { ... } es considered harmful.
Además, me puse la 50% a ambas propiedades debido al derecho a la asignación de izquierda, y debido a la asignación de esta cadena para las dos propiedades no es un problema (asegúrese de entender cómo funciona esto, por ejemplo var a = b = [] establecerá y ab al mismo objetoArray, a menudo no deseado).
var elementStyle = document.getElementById("id").style;
elementStyle.position = "relative";
elementStyle.top = elementStyle.left = "50%";
Hago lo siguiente para centrar un elemento en su elemento primario, que podría ser el cuerpo u otra división.
document.getElementById ("elementId"). Style.marginLeft = "auto"; document.getElementById ("elementId"). Style.marginRight = "auto";
La propiedad de posición determina cómo se coloca el elemento en relación con los demás elementos de la página.
Acabo de hacer una búsqueda para ver si la propiedad de la posición puede tomar valores como el 50% que muestra en su pregunta, no puede.
Comprobé para asegurarme de que se había agregado algo nuevo a CSS que permitía establecer la posición en algo distinto de los que muestro a continuación. Pensé que tal vez estaba equivocado acerca de los valores que la posición puede tomar (y hacer cualquier cosa; siempre se puede codificar cualquier valor para varias propiedades, de lo que se pretende, pero no harán nada). No veo nada que diga que la posición puede tener valores como el 50% y realmente hacer algo.
Los posibles valores de la propiedad de posición son:
relativa
fija
absoluta
estática
hereda
o se puede dejar fuera el elemento . Desde lo que he visto: la estática se comporta de la misma manera que si no hubiera codificado la propiedad de posición para el elemento o clase.
La propiedad de posición puede ser confuso hasta que vea los efectos de los diferentes valores de la posición del elemento - e incluso entonces no siempre es clara.
Por cierto, también puede cambiar style.left y style.top, pero no tendrán ningún efecto a menos que la posición se establezca en uno de los posibles valores.
Sé que suena extraño pero así es como funcionan las cosas actualmente (y dudo que vaya a cambiar) y tenemos que vivir con eso.
Por lo tanto, si se establece la parte superior y/o hacia la izquierda y no pasa nada, mira el valor de las propiedades de posición,
Puede "jugar" con los valores de propiedad con la instalación "Inspeccionar elemento" de su navegador. Creo que todos los principales navegadores tienen esa facilidad. Go read this page about "inspecting"
Le permite cambiar las propiedades de CSS, eliminar y agregar nuevas, a los elementos mientras mira la página en su navegador. Puede hacer cosas como cambiar el margen-izquierda a automático y el margen-derecha a automático y ver cómo se posiciona el elemento. Puede cambiar, agregar o eliminar cualquier propiedad de CSS que desee.
También puede cambiar la posición a uno de varios valores (estático, relativo, absoluto o fijo) para ver cómo se muestra el elemento en relación con los otros elementos en la página.
Si desea eliminar una propiedad, puede resaltar su valor y presionar eliminar e ingresar - eso eliminará la propiedad del elemento o clase, si está buscando en la clase CSS.
Esta función le permite jugar "qué pasa si" con las propiedades de cualquier elemento sin cambiar realmente el HTML o CSS y volver a cargar la página.
Le sugiero encarecidamente que tenga un lápiz y una libreta de papel y tome notas cada vez que cambie algo. Si no lo hace, puede terminar obteniendo las cosas como usted quiere y no podrá recordar todo lo que cambiado
¡Las notas son muy importantes!
Recapitulando: para centrar un elemento dentro de su elemento primario, codifique lo que sigue - reemplazó elementid con la identificación de su elemento.
document.getElementById ("elementId"). Style.marginLeft = "auto"; document.getElementById ("elementId"). Style.marginRight = "auto";
En cuanto al valor de posición, pruébelos con el inspector de elementos en su navegador. Esa es una forma rápida de comenzar a comprender los efectos de los valores posibles de la propiedad de posición.
Tenga en cuenta que si intenta centrar contenido en un cuadro, deberá publicar más HTML. Esto no es tan trivial como el error que Alex señala a continuación. –