Mueva el botón CSS hacia la derecha
La alineación se refiere al posicionamiento de algo de una manera particular, que puede ser texto o botones. La alineación del botón se refiere a cómo desea colocar sus botones, yo.mi. a la izquierda, derecha o en el centro de la página web.
Este artículo discutirá el uso de CSS para alinear un botón a la derecha. Varias propiedades de CSS están disponibles para el posicionamiento de texto o botón. Podemos hacer esto utilizando la propiedad Float, la propiedad de alineación de texto y la propiedad Justify-Content.
Propiedad flotante para alinear el botón a la derecha
La propiedad Float CSS determina cómo se estructuran y se colocan los datos en una página web.
Primero tenemos que crear un botón en el archivo HTML. Utilizamos el editor de texto sublime para poner en práctica esta ilustración. El código HTML para crear un botón simple se muestra en la siguiente imagen:
En este código, creamos un botón en el archivo HTML. Utilizamos la etiqueta que se usa como un contenedor para envolver los elementos HTML dentro de ella. Los atributos de la "clase Div" se utilizan para diseñar el archivo HTML con CSS. Agregamos un texto que se muestra en el botón.
Puede ver el botón que acabamos de crear y mostrar en el lado izquierdo de la página de forma predeterminada.
Ahora, lo siguiente que debemos hacer es colocar este botón en la esquina derecha de la página. El script CSS se utiliza para lograr esto. El botón se coloca a la derecha usando el atributo FLOAT CSS. El ".Button_Btn "se refiere a la clase DIV que creamos en el código HTML para hacer un botón. Ahora, podemos acceder y aplicar el diseño al botón creado dentro de este contenedor. Usamos la propiedad "flotante" y establecemos su valor en "correcto". Nos proporciona algunos valores: ninguno, derecha, izquierda, inicial y heredada. Dado que tenemos la intención de colocar el botón a la derecha, por lo tanto, empleamos el valor "correcto" para la propiedad flotante en CSS.
El script anterior, cuando se ejecuta, produce la salida que se muestra en la siguiente imagen. El botón se coloca a la derecha de la pantalla cuando el valor de la propiedad flotante se establece en "correcto".
Propiedad de alineación de texto para alinear el botón a la derecha
La siguiente propiedad que utilizamos para alinear un botón a la derecha es la propiedad "Alineación de texto" en CSS. Creamos un archivo HTML. Dentro de la etiqueta del HTML, creamos un encabezado que se muestra en la parte superior de la página web utilizando el
etiqueta. Luego, creamos un botón dentro de la clase. Defina un texto que se muestra en el botón.
Esto nos hará presentar la página web de salida en la imagen. El texto que agregamos se muestra en la esquina superior derecha de la página mientras justo debajo es el botón que creamos.
Para mover este botón que creamos en el código anterior al lado derecho de la página, ejercemos la propiedad "Align de texto". Utilizamos el "Alineado de texto" en el script CSS. El código CSS se proporciona a continuación:
La propiedad de alineación de texto se usa para colocar el elemento en las diferentes direcciones. Esta propiedad nos proporciona ciertos valores para colocar los elementos, incluidos los elementos, incluidos los elementos izquierdo, derecho, centro, inicial, heredado y justificar. Dado que queremos que el botón se coloque en la esquina derecha de la página web, utilizamos el valor "correcto" para la propiedad "Alineación de texto" en CSS.
Ahora, trabajamos con el script CSS para diseñar el botón que creamos en el archivo HTML. El "."Se refiere a la clase Div que creamos en HTML, seguido del nombre de la clase. Este es nuestro ejemplo de un "botón". Esto nos permite diseñar el elemento dentro de la clase mencionada. La propiedad "Text-Align" se establece en el valor "Derecho" para que el botón se alinee con la esquina derecha de la página web.
Puede ver cómo la aplicación simple de la propiedad "Alineación de texto" lo ayuda en la alineación del botón a su posición deseada. Para nuestras necesidades, lo ajustamos hacia la derecha y la imagen de salida muestra un botón con texto de "presionar cursor" alineado en el lado derecho.
Propiedad de contenido de justificación para alinear el botón a la derecha
La última propiedad que ejecutaremos para alinear el botón con la esquina derecha es la propiedad "Justify-Content". En los casos anteriores, lo primero que hicimos fue crear un archivo HTML. Puede hacerlo en cualquier editor de texto o estudio de Visual; Lo implementamos en el editor de texto sublime.
En el archivo HTML, dentro de la etiqueta, primero creamos un encabezado con el
etiqueta. Luego, creamos un datos ficticios utilizando el
etiqueta. El
La etiqueta se usa cuando escribimos los párrafos en HTML. Luego comenzamos el . En un documento HTML, la etiqueta Div designa una partición o segmento. Los elementos HTML se colocan dentro de la etiqueta "div" y luego se aplica el estilo CSS. Especificamos el nombre de la clase Div "Dummy_Btn". Estilamos el botón en CSS usando este nombre de clase. Después, dentro de la etiqueta del botón, definimos el "tipo de botón" y la "clase de botón", además. Agregamos el texto que aparece en el botón.
Esta imagen exhibe un encabezado y un párrafo. En la parte inferior de este contenido, se muestra un botón que creamos en HTML.
Ahora, diseñamos este botón con el script CSS usando la propiedad "Justify-Content". En el script CSS, comenzamos la etiqueta "estilo". Dentro de la etiqueta de estilo, tenemos el ".Dummy-btn "para diseñar el botón que creamos en la clase Div con este nombre. Dentro de los aparatos ortopédicos, utilizamos la "Display: Flex". Para utilizar un Flexbox, un contenedor flexible debe tener el atributo de Flex de pantalla. La longitud ajustable para los elementos ajustables se especifica a través de la propiedad flexible. Luego establecemos la propiedad Justify-Content.
La salida del fragmento de código generado previamente se muestra en la siguiente imagen:
Conclusión
En este artículo, discutimos las tres propiedades de CSS para alinear el botón con la posición deseada. Utilizamos la propiedad flotante, la propiedad de alineación de texto y la propiedad Justify-Content. Cada una de las propiedades mencionadas se explica en detalle con los códigos HTML y CSS. Implementamos el código de ejemplo usando el editor de texto sublime. Al utilizar las diversas propiedades, este tutorial hace que la alineación de los botones en CSS sea simple.