¿Cómo centrar el texto verticalmente con un ícono de fuente grande e impresionante?
Digamos que tengo un botón de arranque con un ícono de fuente increíble y algo de texto:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
¿Cómo hago para que el texto aparezca centrado verticalmente? El texto ahora está alineado con el borde inferior del ícono: http://jsfiddle.net/V7DLm/1/
Tuve que hacerlo yo mismo, tú debes hacerlo al revés.
- No juegues con la alineación vertical de tu texto.
- juega con la alineación vertical del increíble ícono de fuente
<div>
<span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
<span class="my-text">hello world</span>
</div>
Por supuesto, no puedes usar estilos en línea y apuntarlos con tu propia clase CSS. Pero esto funciona copiando y pegando.
Ver aquí: Alineación vertical del texto y el ícono en el botón
Sin embargo, si fuera por mí, no usaría el icon-2x. Y simplemente especifique el tamaño de fuente yo mismo, como se muestra a continuación
<div class='my-fancy-container'>
<span class='my-icon icon-file-text'></span>
<span class='my-text'>Hello World</span>
</div>
.my-icon {
vertical-align: middle;
font-size: 40px;
}
.my-text {
font-family: "Courier-new";
}
.my-fancy-container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
}
para ver un ejemplo práctico, consulte JsFiddle
Utilizo íconos junto al texto el 99% del tiempo, así que hice el cambio globalmente:
.fa-2x {
vertical-align: middle;
}
Agregue 3x, 4x, etc. a la misma definición según sea necesario.
