Para alinear las casillas de verificación o los botones de radio con sus etiquetas se puede lograr de muchas maneras. Algunos de los métodos más simples para lograr esto se describen a continuación con el código adecuado y la salida en diferentes navegadores. Ahora el estilo se puede hacer de varias maneras para alinear las casillas de verificación y sus etiquetas. Para este artículo, estamos usando una hoja de estilo interna que se realiza bajo la etiqueta de estilo.
Método 1: al hacer que la posición de la casilla de verificación sea relativa, establecer la alineación vertical en el medio puede alinear las casillas de verificación y sus etiquetas. Aquí, hemos hecho que la posición de la casilla de verificación sea relativa a la etiqueta. Entonces, las casillas de verificación están alineadas de acuerdo con la etiqueta.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Aligning Checkboxes consistently
in cross browsers
</title>
<style>
h1 {
color: green;
}
input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
label {
display: block;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<form>
<label>
<input type="checkbox">
A Computer Science Portal for Geeks
</label>
<label>
<input type="checkbox">
Just an Edutech Company to educate
</label>
</form>
</body>
</html>
Producción:
- Mozilla Firefox:
- Google Chrome:
- Explorador de Internet:
Método 2: mediante el uso de la pantalla flexible , ya que la pantalla está configurada para flexionar y la alineación es central, por lo que tanto la casilla de verificación como la etiqueta están alineadas con el centro del eje transversal.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Aligning Checkboxes consistently
in cross browsers
</title>
<style>
h1 {
color: green;
}
label {
display: flex;
align-items: center;
}
input[type=checkbox]{
flex: none;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<form>
<label>
<input type="checkbox">
A Computer Science Portal for Geeks
</label>
<label>
<input type="checkbox">
Just an Edutech Company to educate
</label>
</form>
</body>
</html>
Producción:
- Mozilla Firefox:
- Google Chrome:
- Explorador de Internet:
Método 3: al agrupar la etiqueta y la casilla de verificación en el mismo bloque, podemos alinear la casilla de verificación y la etiqueta de manera consistente en los navegadores cruzados.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> Aligning Checkboxes consistently in cross browsers </title> </head> <body> <h1 style="color: green;">Geeksforgeeks</h1> <form> <div> <label style="display: inline-block"> <input style="vertical-align: middle" type="checkbox" /> <span style="vertical-align: middle"> A Computer Science Portal for Geeks </span> </label> </div> <div> <label style="display: inline-block"> <input style="vertical-align: middle" type="checkbox" /> <span style="vertical-align: middle"> Just an Edutech Company to educate </span> </label> </div> </form> </body> </html>
Producción:
- Mozilla Firefox:
- Google Chrome:
- Explorador de Internet:
Publicación traducida automáticamente
Artículo escrito por rishabhjain21 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA