Esas botoneras: centrándolas

Uno de los temas más complicados a la hora de estructurar y diagramar un sitio, es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener [un buen CSS reseter][1] a mano que te ayude a setear esas propiedades en todos los browsers, aún así hay elementos que no obedecen como querríamos que lo hicieran. Algunos trucos se deben usar, y finalmente no queda totalmente exacto en todas las plataformas y navegadores. Imagínate esos formularios gigantescos, donde sobran campos y la usabilidad es nula… un lío.

Lo que se va a ver aquí, será específicamente cómo abordar la estructuración de una botonera de formularios (o de cualquier otro en realidad), y cómo lograr que se estén siempre centradas a pesar de cuántos botones tengan. El ejemplo gráfico a continuación:

![Ejemplo Botonera Centrado en CSSLab][2]

He visto muchas soluciones a esto, la mayoría de ellas complicadas (mi slogan siempre es facilitar la vida en su máxima expresión). Por ejemplo, se hacen class’es para cada botón (.boton_aceptar_1, .boton_aceptar_2 etc etc etc) y se posicionan absolutamente. También se hacen class’es a cada botón y se marginan, incluso negativamente (lo que IE6 no ve con buenos ojos). Imagínense si son varias páginas de formularios y los botones se repiten (por ejemplo, el ‘Aceptar’ o el ‘Enviar’ son los más comunes) pero no siempre van de a 2, sino que a veces van solos o de a 3, 4…. enfin. Hacer class’es para cada situación no es la mejor solución, ya que llenaremos la hoja de estilos de propiedades de posicionamiento en vez de aplicar una solución global, independiente de la cantidad de botones que estén involucrados. Bueno, esa es la idea de este artículo.

Es frecuente que los temas que escribo para CSSLab se den mientras estoy en algún proyecto, y me topo con dificultades que logro solucionar, y luego las muestro y explico aquí cómo se resolvió finalmente. Este es otro de esos casos, sólo que este tema lo había resuelto hacía mucho pero se dió nuevamente a manos de otro profesional web con quien trabajo. Lo ayudé con esto y finalmente me tomo el tiempo de explicarlo aquí para todos quienes tengan la misma situación.

Vamos a lo que nos reúne. [Construído el lindo formulario][3], con

, , varios , y </strong> quizás, llega la hora de poner los botones de <strong>Enviar</strong> y <strong>No Enviar</strong> como en el ejemplo gráfico anterior. Mi método implica utilizar listas, ya que me gustan para [contener botones como menúes][4] (aunque puede ser un <strong><div></strong> si quienes, incluso un <strong><p></strong>. Cada uno con su gusto). El <strong>HTML</strong> de la botonera:</p> <pre><code class="language-markup"><ul id="botonera"><br /> <li><input type="submit" value="Enviar" /><input type="reset" value="No Enviar" /></li><br /> </ul></code></pre> <p>Como habrán notado, en vez de poner cada botón dentro de un <strong><li></li></strong> y flotarlos a la izquierda (como usualmente se usa para los [menúes horizontales][5]), puse todos los botones dentro de un mismo <strong><li></strong>, caso contrario no podrían ser centrados. Entonces, si es sólo un botón, o todos los que sean necesarios, deberán ir consecutivamente uno al lado del otro dentro de un único <strong><li></li></strong>.</p> <p>Ahora, el <strong>CSS</strong> que hará la magia:</p> <pre><code class="language-css">#botonera {<br /> width: 400px;<br /> margin: 20px auto;<br /> }<br /> #botonera li {<br /> list-style: none;<br /> text-align: center;<br /> }<br /> #botonera input {<br /> margin-left: 10px;<br /> }</code></pre> <p>Bastante simple. Si se han fijado, lo que hace que se centren los elementos dentro del <strong><li></strong> es el <strong>text-align: center;</strong> ya que como <strong><input /></strong> es una etiqueta lineal, se alineará tal como lo haría un texto cualquiera. Ese es todo el truco. Lo otro es darle al <strong><input /></strong> un <strong>margin-left</strong> de unos <strong>10px</strong> para que se separen un poco si son 2 o más botones (he visto usar <strong> </strong> para ello… no es correcto). Saco 3 conclusiones de esta solución:</p> <ol> <li>No se usa <strong>float</strong> alguno, lo que no hace el contenedor colapsar así que nos ahorramos un [clearfix][6]. Además que no puedes centrar un <strong>float</strong>.</li> <li>Se puede usar para cualquier botón, no sólo <strong><input /></strong>: <strong><a></strong> y <strong><button></strong> también son soportados. Así que puedes también hacer un menú horizontal centrado con esta misma técnica.</li> <li>Es soportado por todos los browsers.</li> </ol> <p>[Ver Ejemplo][7]{.verejemplo}</p> <p>[1]: <a href="http://www.csslab.cl/2007/10/18/css-reseter/">http://www.csslab.cl/2007/10/18/css-reseter/</a> “Enlace en CSSLab a “CSS Reseter”” [2]: <a href="http://www.csslab.cl/wp-content/uploads/2008/03/ejemplo_1.gif">http://www.csslab.cl/wp-content/uploads/2008/03/ejemplo_1.gif</a> [3]: <a href="http://www.csslab.cl/2006/10/13/formularios-semanticos-ii/">http://www.csslab.cl/2006/10/13/formularios-semanticos-ii/</a> “Enlace en CSSLab a “Formularios Semánticos: el regreso”” [4]: <a href="http://www.csslab.cl/2007/12/28/videocast-2-menu-con-listas/">http://www.csslab.cl/2007/12/28/videocast-2-menu-con-listas/</a> “Enlace en CSSLab a " Videocast 2: menú con listas”" [5]: <a href="http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/">http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/</a> “Enlace en CSSLab a “Menú horizontal y algo +”” [6]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace en CSSlab a “Flotando en la incertidumbre”” [7]: <a href='http://www.csslab.cl/ejemplos/botonera/'>http://www.csslab.cl/ejemplos/botonera/index.html</a> “Enlace en CSSLab a “Ejemplo Centrando Botonera””</p> </div></div> <div class="pagination"> <div class="pagination__title"> <span class="pagination__title-h">Leer otros artículos</span> <hr /> </div> <div class="pagination__buttons"> <span class="button previous"> <a href="/2008/03/19/centrando-texto-verticalmente/"> <span class="button__icon">←</span> <span class="button__text">Centrando texto verticalmente</span> </a> </span> <span class="button next"> <a href="/2008/03/07/horror-2/"> <span class="button__text">Horror #2</span> <span class="button__icon">→</span> </a> </span> </div> </div> </div> </div> <footer class="footer"> <div class="footer__inner"> <div class="copyright copyright--user"> <span>© CSSLab 2005 ~ 2022. Todos los derechos reservados.<br> Escrito y mantenido por Jorge Epuñan desde 🇨🇱.</span> </div> </div> </footer> <script src="/assets/main.js"></script> <script src="/assets/prism.js"></script> <script src="//static.codepen.io/assets/embed/ei.js" async></script> </div> </body> </html>