Cómo alinear y centrar los botones de redes sociales

¿No os traen de cabeza los puñeteros botones sociales? ¿No os aparecen descuadrados cuando los incluimos en nuestra plantilla? Unas veces se van unos píxeles para arriba, otras para abajo, se separan mucho entre ellos o demasiado poco, no hay manera de centrarlos todos a la vez...

Bueno pues si no es así no hace falta que sigáis leyendo, pero a mí me han dado mucha guerra en el pasado y por eso he utilizado el término revista en su acepción más bélica.

Y cómo parece que ya encontré una manera sencilla de que salgan centrados y bastante bien alineados entre ellos, pues lo comparto con vosotros fieles y abnegados suscriptores y lectores de este vuestro blog.


La solución más recurrente para esto de los botones es ponerlos con float y santas pascuas y alegrías. Los alineamos a un lado u otro, les añadimos algún que otro padding o margin rectificatorio y listo. También podemos usar tablas, pero eso nos complica un poco la parte HTML, ya de por sí larga por el propio código que genera los botones.

Así que lo solución que encontré se limita a encerrar cada botón en un div personalizado, todo el conjunto en otra caja y luego ya dar estilo desde el CSS, siendo la clave el uso de inline-block para poder alinear correctamente y una anchura adaptada a cada botón con un overflow: hidden para que no salgan algunos letreros que no queremos, como es el del botón +1 de Google Plus y también para que no haya diferentes márgenes entre unos y otros.

Este sería el código completo incluido el que genera los susodichos botones, listo para incorporar en la propia plantilla. Bajo el div con clase post-footer suele ser un buen sitio para ponerlo.

<style>
.redes {
 margin:10px auto 20px;
 text-align:center;
}
.redes .botfac, .redes .bottwi, .redes .botgoo {
 width: 100px;
 overflow:hidden;
 zoom: 1;
 *display: inline;
 display: inline-block;
 vertical-align: top;
}
.redes .botgoo {
 width:60px;
}
</style>

<div class='redes'>
 <!--Facebook-->
 <div class='botfac'>
  <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/>
 </div>
 <!--Twitter -->
 <div class='bottwi'>
  <a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
 <!-- Google +1 -->
 <div class='botgoo'>
  <g:plusone size='medium'/>
 </div>
</div>

Sólo están los tres de las redes más populares, Facebook, Twitter y Google Plus, pero pienso que con el mismo sistema se puede alinear cualquier otro.

Por ejemplo para el de Pinterest, sólo habría que añadir un nuevo selector en la lista del CSS (pongamos .botpint), ajustarlo en anchura (.redes .botpint {width:50px;}) como con el de G+ y luego poner su código de la misma manera:

<!-- Pinterest -->
<div class='botpint'>
 <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUIFWGaFWq4aPz-aW3cI5b9DmHkwHbdc_PbEuv5GySy71sDziN8-9ObWWWWYvOURWd40eCJbnm7-K0yIGm43vFGt_oMBW6ETOQtGboZE0cnx2ZOBWWHStwZ5JZfRa8oPzPFD0Dyoqyj8/s1600/pin+it.gif'/></a>
</div>

Funciona perfectamente hasta IE8 y centrados pero en líneas individuales en IE7, pero es que en este último ni siquiera se interpreta bien el código que genera el "botón +1", así que ¿a quién le importa?