Cómo centrar alinear iconos impresionante fuente verticalmente en un div círculo?

Estoy tratando de alinear los iconos de fuente impresionante centro verticalmente. Si hay texto podemos hacerlo usando la propiedad line-height incluso traté de dar el line-height la misma altura que la altura del div.

Intentó 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 diferir. Así que un codificar de margin-top puede no funcionar para otro tamaño de icono 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

Author: rram, 2013-12-30
Source

8 answers

Puede usar line-height para alinear el icono en el div.

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

Aquí está el ejemplo trabajando en un fiddle.

 61
Author: agconti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-05 22:39:23

No para restar valor a la solución anterior que funciona perfectamente, pero Font Awesome 4 tiene una gran 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í.

 24
Author: asherstoppard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-02 23:35:14

Establecer una clase para font awesome por ejemplo.fa-vc luego agréguelo a toda la fuente impresionante fuente que desea que esté alineada con otro texto. su código se verá como (este ejemplo es un signo 'x') 

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

Y establezca esta clase en 

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

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

Problema resuelto...

 4
Author: Yuan Shen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-19 14:04:07

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 estás usando Boostrap, usa una clase center-block y está perfectamente centrada.

 3
Author: Gothburz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-29 13:31:24

vertical-align: middle si se establece la div display: table-cell
http://jsfiddle.net/M3jxT/484/

 2
Author: Rohit Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-07 09:44:36

La línea-altura igual y texto-alinear: centro funciona muy bien para hacer icono en el medio tanto vertical como horizontalmente. Sin embargo, si desea hacer cualquier cosa centrada tanto vertical como horizontalmente de una manera dinámica, código como este -

Marcado: 

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

Css: 

.container{
   position: relative;
}

.target{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
 1
Author: Xuwel Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-13 18:13:28

Usando la clase fa-fw los hace correctamente alineados. 

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

Compruébalo en acción. http://jsfiddle.net/ahj0ncpa /

 0
Author: Shubhamoy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-18 20:43:21

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

Tenía un div envolviendo mi elemento font awesome.

Mi HTML es: 

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

Dando tamaño de fuente en em solucionado el problema.

 0
Author: Harish V,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-07 09:38:42