Botón de alineación de CSS a la derecha
Propiedades para alinear el botón derecho en CSS
- Uso de la propiedad de alineación de texto.
- Uso de la propiedad flotante.
- Uso de la propiedad Justify-Content.
Ejemplo # 1: Alinee el botón derecho usando la propiedad de alineación de texto
Cree su archivo HTML para crear el botón y para alinear este botón, tenemos que crear el CSS. Vamos a elaborar los ejemplos dados en nuestro estudio de código visual. Por lo tanto, tenemos que generar el archivo HTML, y el código de este archivo HTML se pegan a continuación en la imagen.
Aquí, hemos creado dos botones diferentes y luego queremos alinear un botón a la derecha para que pueda aprender fácilmente la diferencia entre el botón original y el botón de alineación correcta. Entonces, para esta alineación de botones, tenemos que utilizar la propiedad de alineación de texto CSS. Cuando usamos esta propiedad en el botón que hemos creado, el botón establece su posición en el lado derecho de la página. En el archivo CSS, puede ver cómo usar esta propiedad.
Código CSS
Aquí, el código CSS también se proporciona a continuación. Usamos CSS para dar estilo o alinearse a nuestros botones. En este código, puede ver que estamos utilizando la propiedad "Align de texto".
Primero, usamos el "."Y el nombre de nuestro primer botón, que es" btn-original "aquí, y dentro de los aparatos ortopédicos de este primer botón, usamos la propiedad" Align de texto "y la establecemos en la" izquierda."Escribimos el título del segundo botón, que es" BTN-Right ", colocando. "" Nuevamente y dentro de los aparatos ortopédicos rizados, nuevamente usamos la misma propiedad, y esta vez alineamos el botón al lado "derecho" de la página o pantalla.
Producción:
La salida muestra dos botones en los que se muestra el botón original en el lado izquierdo, y luego el botón se desplaza hacia el lado derecho de la pantalla.
Ejemplo # 2: Botón de alinear a la derecha utilizando la propiedad flotante
En este archivo HTML, nuevamente diseñamos dos botones. El nombre del primer botón es "botón" aquí, y el nombre del segundo botón es "Botón Right."En este ejemplo, vamos a usar otra propiedad para alinear el botón a la derecha. La propiedad que usamos en el CSS de este código es la propiedad "Flotación". Funciona igual que la propiedad de "Align de texto".
Código CSS
En este archivo CSS, usamos la propiedad Float. La propiedad flotante en CSS se usa para flotar el elemento, el objeto o el botón a los lados derecho e izquierdo. El ".original "se utiliza para aplicar el diseño al botón" original ". Dentro de esto, aplicamos la propiedad "flotante" y la colocamos en la "izquierda", para que el botón original se coloque en la esquina izquierda de la pantalla. Dentro de ".Botón correcto ", establecemos el" derecho "en la propiedad" flotante ". Esto colocará nuestro segundo botón en la esquina derecha de la pantalla.
Producción
En la imagen de arriba, el botón está alineado con la esquina derecha de la pantalla. Aquí, hemos utilizado la propiedad "flotante", y puede ver que muestra la salida igual que la propiedad "Align de texto" mostrado.
Ejemplo # 3: Alinee el botón derecho usando la propiedad Justify-Content
En el tercer ejemplo, creamos solo un botón usando la clase DIV y luego usamos la tercera propiedad de CSS, que es la propiedad "Justify-Content". Esta propiedad también alinea el botón hacia la izquierda o hacia la derecha, pero tenemos que alinear el botón solo a la derecha
Código CSS
En este archivo CSS, también cambiamos el color de "fondo" a "rosa" y establecemos el "relleno" en "10px" desde arriba e abajo y "0" para la derecha e izquierda. La "pantalla" que usamos aquí es "Flex", y luego usa la tercera propiedad de CSS que es "Justify-Content" y configúrela en "Flex-End", por lo que este "Flex-End" establece el botón a la derecha a la derecha fin.
Producción
El color de fondo es rosa aquí, ya que usamos "color de fondo" para "rosa."El botón está en el extremo correcto, ya que usamos la propiedad" Justify-Content "en nuestro archivo CSS de este ejemplo.
Ejemplo # 4
En este cuarto ejemplo, hemos creado seis botones diferentes usando la clase de botón en HTML. Ahora, usamos diferentes colores para los seis botones y alinamos tres botones con la "derecha" con la propiedad CSS, y tres están en el lugar original, que es "izquierda", donde no usamos ninguna propiedad.
Código CSS
El color del primer botón es "verde", y el código para esto es "#4CAF50". No necesitamos ningún borde, por lo que la frontera es "Ninguno."El" color "del texto escrito dentro de estos botones es" blanco."Los sociedades superior e inferior son" 15px ", y los acolches izquierdo y derecho son" 32px ". El "Align de texto" está centrado, por lo que el texto dentro del botón aparece en el centro del botón. La "decoración del texto" también es "ninguno."El" tamaño de la fuente "está configurado en" 16px ". Los márgenes superior e inferior son "4px", y los márgenes derecha e izquierda son "2px". El "puntero" está aquí para ser utilizado como un "cursor."
Luego alineamos este botón a la derecha, por lo que tenemos el "flotador" aquí, que está configurado en el "derecho."Además, cambie el color del botón siguiente y aplique" rojo "aquí, y no use ninguna propiedad para alinear el botón, por lo que, por defecto, este botón se mostrará en el lado izquierdo. El cuarto botón, "Color de fondo", es blanco, por lo que también cambiamos el "color" del texto a "negro" y flote este cuarto botón a la derecha. Después de cambiar el color del quinto y sexto botones a gris, nuevamente usamos "Float: Right" con el sexto botón. Comprobemos cómo mostrará estos botones en el navegador.
Producción
En esta salida, tenemos seis botones en los que se representan tres botones en el lado derecho donde usamos la propiedad "Flotación."Entonces, con la ayuda de esta propiedad, tres botones flotan hacia el lado derecho. Y también, tres botones están en el lado izquierdo, ya que no usamos ninguna propiedad para estos tres botones. Los colores de estos botones también son diferentes.
Conclusión
Este tutorial ha discutido las tres propiedades que proporciona el CSS para alinear el botón a la esquina derecha de la pantalla. Hemos explicado las tres propiedades de CSS en detalle que son "Align-Align", "Float" y "Justify-Content" Propiedades. Hemos generado tres ejemplos diferentes, y hemos aplicado las propiedades alternativas en cada ejemplo y también mostramos la salida de todos los códigos, por lo que puede obtener fácilmente este punto sobre cómo alinear el botón a la derecha a la derecha. Este tutorial lo ayudará a alinear su botón al lado derecho utilizando las propiedades de CSS.