How to align form properly
Contenidos
Wrap your form in a div. Set the div’s display to block and text-align to center (this will center the contained form). Set the form’s display to inline-block (auto-sizes to content), left and right margins to auto (centers it horizontally), and text-align to left (or else its children will be center-aligned too).
To centre block elements (such as divs and forms and paragraphs), give it a width and set margin-right and margin-left to auto. It’s important to understand the difference between block and inline elements.
We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to “inline-block” and give a fixed width. After that, set the text-align property to “right”, and the labels will be aligned with the inputs on the right side.
HTML | <input> align Attribute left: It sets the alignment of image to the left. right: It sets the alignment of image to the right. middle: It sets the alignment of image to the middle. top: It sets the alignment of image to the top. bottom: It sets the alignment of image to the bottom.
Sección central html
Otro problema es que no puedo conseguir que mi formulario se alinee en el centro de la página web. Alguna idea de por qué estoy teniendo este problema. PS esto no es un desafío de código de cualquier tipo. Además, soy muy nuevo por lo que mi código estoy seguro de que estará lejos de ser agradable y limpio.
Me gustaría señalar que usted tiene que asegurarse de que usted está buscando en el derecho “cosa”. El hecho de que el elemento del formulario sea transparente (parece blanco porque es el color del cuerpo) hace que sea más difícil ver dónde está realmente y cuánto espacio está ocupando.
Ahora mismo el elemento formulario es un elemento a nivel de bloque y ocupará todo el espacio horizontal disponible, centrado o no. Si le das al formulario algún color de fondo y un ancho máximo podrás ver mejor el elemento. Ahora añade margin: auto para centrarlo.
Html centrar texto en div
Tu html está hecho un asco – sin etiquetas de cierre, sin etiquetas para los campos del formulario. Pásalo por un validador xhtml y sigue los consejos. Entonces, aborda el estilo/css – será mucho más fácil una vez que tu marcado esté funcionando. Coloca tus reglas de estilo en un archivo css externo.
La respuesta correcta es hacer tu div envolvente, darle un ancho y establecer margin:auto. Lo de alinear el texto es una técnica antigua que se usa cuando se trabaja con ie6, y entonces requiere más código para superar que el texto esté alineado al centro. Además, sólo alrededor del 10% de los usuarios están todavía en IE6, así que no te preocupes demasiado por ellos con este pedazo de código en particular, para ser honesto.
también el consejo dado era incompleto de todos modos. usted debería haber establecido text-align:center para el CUERPO, entonces text-align:left para el div envolvente para conseguir que esto funcione en ie6 (todos los otros navegadores entienden margin:center.
Centro de respuesta Css
Esto centrará todo el contenido dentro del DIV padre. Una forma opcional es utilizar el atributo CSS margin: auto con anchos y altos predefinidos. Por favor, sigue el siguiente hilo para más información.
La respuesta aceptada no funcionó con mi formulario, incluso cuando lo reduje al mínimo y copié y pegué el código. Si alguien más tiene este problema, por favor, pruebe mi solución. Básicamente, se establece Top y Left al 50% como lo hizo el OP, pero se desplaza el contenedor del formulario con márgenes negativos en la parte superior e izquierda iguales al 50% de la altura y el ancho del div, respectivamente. Esto mueve el punto central de las coordenadas Top y Left al centro del formulario. Destacaré que la altura y la anchura del formulario deben ser especificadas (no relativas). En este ejemplo, un div de formulario de 300x300px con márgenes de -150px en la parte superior e izquierda está perfectamente centrado sin importar el tamaño de la ventana:
Ahora, para aquellos que se preguntan por qué he utilizado un contenedor para el formulario, es porque me gusta tener la opción de colocar otros elementos en la vecindad del formulario y tenerlos centrados también. El contenedor del formulario es completamente innecesario en este ejemplo, pero definitivamente sería útil en otros casos. Espero que esto ayude.
