html - texto - centrar vertical en un div

¿Cómo centrar los íconos impresionantes de la fuente verticalmente en un círculo div?

Question

Estoy tratando de alinear centralmente los íconos increíbles de la fuente en vertical. Si hay texto, podemos hacerlo usando la propiedad de line-height incluso intenté dar a la line-height la line-height misma altura que la altura del div.

display:inline-block probada display:inline-block y vertical-align:middle no hizo el truco.

Cómo centrar los iconos verticalmente en todos los tamaños. Debe ser dinámico porque el tamaño del icono puede ser diferente. Por lo tanto, un código duro de margen superior no funcionará para otro tamaño de icono y div.

CÓDIGO

.exp{
width:80px;
height:80px;
background-color:red;
border-radius:100%;
line-height:80px;
text-align:center;
vertical-align:middle;
display:inline-block;
}

JSFIDDLE

Answer 1

Aquí hay una mezcla que me gusta usar para la alineación vertical general:

@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@include vertical-align;

Funciona muy bien si también usas Boostrap, usa una clase de center-block y está perfectamente centrado.

Answer 2

El uso de la clase fa-fw los hace alineados correctamente.

<div class="col-sm-1">
<i class="fa fa-mobile fa-fw"></i>
</div>

Verifíquelo en acción. http://jsfiddle.net/ahj0ncpa/

Answer 3

Establezca una clase para fuentes increíbles, como .fa-vc, y luego agréguela a todas las fuentes de gran calidad para que esté alineada con el resto del texto. su código se verá como (este ejemplo es un signo ''x'')

<i class="fa fa-times fa-vc"></i>

y configurar esta clase para

.fa-vc{line-height:inherit!important;}

esto anulará la configuración predeterminada de font awesome (line-height: 1px)

problema resuelto...

Answer 4

Me enfrenté a un problema similar a la alineación vertical de un icono impresionante de fuente en Chrome y Mozilla.

Tuve un div envolviendo mi fuente elemento impresionante.

Mi HTML es:

<div class="icon-wrap">
<span class="fa fa-times"></span>
</div>

dando tamaño de fuente en em resuelto el problema.

Answer 5

No menoscabar la solución anterior que funciona perfectamente, pero Font Awesome 4 tiene una excelente función de apilamiento que se puede utilizar con el siguiente código.

<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

Hay algunas opciones y combinaciones realmente agradables que se pueden encontrar aquí .

Answer 6

Puede usar line-height para alinear el ícono en el div .

Pruebe agregar .fa-camera-retro { line-height: inherit;} a su css. Usar inherit hace line-height tome la altura de su div que contiene, por lo que todos los iconos estarán centrados, incluso si esos div son de diferentes tamaños. Si lo desea, también puede establecer el line-height la line-height del div en píxeles para centrarlo explícitamente, es decir line-height: 80px .

Aquí está el ejemplo trabajando en un fiddle .

Answer 7

la altura de línea igual y la alineación de texto: el centro funciona muy bien para hacer un icono en el medio, tanto vertical como horizontalmente. Sin embargo, si desea hacer algo centrado tanto vertical como horizontalmente de una manera dinámica, escriba un código como este:

margen:

<div class="container>
<div class="target">
</div>
</div>

css:

.container{
position: relative;
}
.target{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

Answer 8

vertical-align: middle funcionará si configuras la display: table-cell div display: table-cell
http://jsfiddle.net/M3jxT/484/