Centrar un botón en CSS
- Centrar un botón vertical y horizontalmente
- Diferentes métodos para centrar un botón
-
Centrar un botón usando
text-align: center -
Centre un botón usando
display: gridymargin: auto -
Centrar un botón usando
display: flex -
Centrar un botón usando
posición: fija - Centrar dos o más botones
- Conclusión
El estilo más delicado para una página web HTML se logra principalmente a través de CSS. La disposición de los componentes en la página web se puede controlar con CSS.
Existen diferentes métodos para alinear un botón en el centro de una página web. Las alineaciones del botón se pueden ajustar horizontal o verticalmente según se prefiera.
Centrar un botón vertical y horizontalmente
Estamos utilizando el posicionamiento y la propiedad transformar en este ejemplo para centrar vertical y horizontalmente el elemento botón:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 200px;
position: relative;
border: 2px solid blue;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<button>Button at the Center</button>
</div>
</div>
</body>
</html>
Aquí, hemos configurado la vista del botón dentro de un contenedor para mostrar claramente la alineación central.
Diferentes métodos para centrar un botón
Un botón se puede centrar usando los siguientes métodos:
text-align: center: ingrese el valor de la propiedadtext-alignde la etiqueta principaldivcomocenter.margen: auto- Introduzca el valor de la propiedadmargenenauto.display: flex- Introduzca el valor de la propiedaddisplayenflexy establezca el valor de la propiedadjustify-contentencenter.display: grid- Introduzca el valor de la propiedaddisplaycomogrid.
Hay más métodos que se pueden usar para centrar un botón.
Centrar un botón usando text-align: center
Usamos la propiedad text-align y establecemos su valor en center en el siguiente ejemplo. Esto se puede colocar dentro de la etiqueta cuerpo o la etiqueta principal div del elemento.
Colocando el text-align: center en la etiqueta principal div del elemento button:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
text-align: center;
border: 2px solid blue;
width: 300px;
height: 200px;
padding-top: 100px;
}
#bttn{
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button id ="bttn"> Button at the Center </button>
</div>
</body>
</html>
Colocando el text-align: center dentro de la etiqueta body:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<button>Button at the Center</button>
</body>
</html>
Si es necesario, mueva el botón al centro exacto de la página, se debe usar la propiedad padding-top, pero este no es el mejor método para centrar un botón.
Centre un botón usando display: grid y margin: auto
Aquí, usamos la propiedad display: grid y la propiedad margin: auto en CSS. La display: grid se coloca en la etiqueta principal div del elemento button en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: grid;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
Aquí, el botón se colocará en el centro de las posiciones vertical y horizontal.
La propiedad display con el valor grid se utiliza dentro del contenedor. Por lo tanto, afectará al contenedor mientras que la propiedad margen como auto se usa en el elemento botón, lo que afectará al botón.
Estas dos propiedades juegan un papel esencial en el centrado de un botón.
Centrar un botón usando display: flex
Este es el método más utilizado cuando se alinea un botón al centro. Aquí hay tres propiedades: display: flex;, justify-content: center; y align-items: center;, que juegan un papel esencial en el centrado de un botón.
Este ejemplo demuestra la alineación del botón en el centro de las posiciones vertical y horizontal.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
Centrar un botón usando posición: fija
Damos un margen del 50% desde el lado izquierdo de la página y luego establecemos la posición: fija que tomará solo la posición en el centro del cuerpo en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: fixed;
left: 50%;
}
</style>
</head>
<body>
<div class="button-container-div">
<button>Button at the Center</button>
</div>
</body>
</html>
Aquí, el botón no se aplica al centro de toda la página web.
Centrar dos o más botones
Si hay dos o más botones, podemos envolver todos esos botones en un elemento div y luego usar la propiedad flexbox para alinear los botones en el centro. Si dos botones se consideran como un elemento div, todas las propiedades se aplicarán a ambos.
Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
button.margin-right {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit" class="margin-right">Select</button>
<button type="submit">Submit</button>
</div>
</body>
</html>
Alternativamente, podemos centrar tanto el bloque en línea como los elementos de bloque usando flexbox como en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit">Select</button>
</div>
<br>
<div class="flex-box jc-center">
<button type="submit">Submit</button>
</div>
</body>
</html>
Conclusión
Existen numerosos métodos para centrar un botón usando diferentes propiedades en CSS y HTML. Como se mencionó anteriormente, se pueden usar diferentes enfoques para hacer que un botón o botones se centren en una página web fácilmente usando las diversas propiedades de CSS junto con HTML.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.