¿Cómo centrar el texto verticalmente con un gran icono de fuente impresionante?

Digamos que tengo un botón de arranque con un icono de fuente impresionante y algo de texto:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

¿Cómo hago que el texto aparezca centrado verticalmente? El texto está alineado con el borde inferior del icono ahora: http://jsfiddle.net/V7DLm/1/

EDITAR: Tengo una posible solución : http://jsfiddle.net/CLdeG/1/ pero se siente un poco hacky: introduce una etiqueta p adicional, usa pull-left y display: table. Quizás alguien pueda sugerir una forma más fácil.

Solo tenía que hacer esto yo mismo, debes hacerlo al revés.

• no juegues con la alineación vertical de tu texto
• juega con la alineación vertical del ícono font-awesome

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Por supuesto, no podría usar estilos en línea y apuntarlo con su propia clase css. Pero esto funciona en forma de copiar y pegar.

Ver aquí: Alineación vertical del texto y el ícono en el botón

Sin embargo, si fuera por mí, no usaría el ícono-2x. Y simplemente especifique el tamaño de fuente yo mismo, como en el siguiente

<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 un ejemplo de trabajo, vea JsFiddle

Utilizo iconos al lado del texto el 99% del tiempo, así que realicé el cambio globalmente:

.fa-2x {
  vertical-align: middle;
}

Agregue 3x, 4x, etc. a la misma definición según sea necesario.

Después de considerar todas las opciones sugeridas, la solución más limpia parece ser establecer la altura de la línea y alinear todo verticalmente:

Ver demostración de Jsfiddle

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

Si las cosas no se alinean, un simple line-height: inherit;CSS a través de elementos específicos de i.fa que tienen problemas de alineación podría ser suficiente.

También podría utilizar una solución global que, debido a una especificidad CSS ligeramente superior, anulará la regla .fa de FontAwesome que especifica line-height: 1sin requerir !importantla propiedad:

i.fa {
  line-height: inherit;
}

Solo asegúrese de que la solución global anterior no cause ningún otro problema en lugares donde también pueda usar los iconos FontAwesome.

una opción de flexbox - font awesome 4.7 y abajo

URL alojada de FA 4.x: https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

violín

http://jsfiddle.net/Hastig/V7DLm/180/

usando flex y font awesome 5

URL alojada de FA 5.x: https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

violín

https://jsfiddle.net/3bpjvof2/

La forma más simple es establecer la propiedad css de alineación vertical en el medio

i.fa {
    vertical-align: middle;
}

Esto funcionó bien para mí.

i.fa {
  line-height: 100%;
}

Intenta configurar tu icono como height: 100%

No necesita hacer nada con el contenedor (por ejemplo, su botón).

Esto requiere Font Awesome 5. No estoy seguro si funciona para versiones anteriores de FA.

.wrap svg {
    height: 100%;
}

Tenga en cuenta que el icono es en realidad un svggráfico.

Manifestación

Para aquellos que usan Bootstrap 4 es simple:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Otra opción para ajustar la altura de la línea de un icono es usar un porcentaje de la vertical-alignpropiedad. Por lo general, 0% es la parte inferior y 100% en la parte superior, pero uno podría usar valores negativos o más de cien para crear efectos interesantes.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

Envolvería el texto de forma que pueda orientarlo por separado. Ahora, si flota tanto hacia la izquierda como hacia la izquierda, puede usar la altura de línea para controlar el espaciado vertical de la. Ajustándolo a la misma altura que (30px) lo alineará en el medio. Ver aquí .

Nuevo marcado:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Nuevo CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

Cuando se usa una caja flexible, la alineación vertical de los íconos impresionantes de la fuente junto al texto puede ser muy difícil. Intenté márgenes y relleno, pero eso movió todos los elementos. Probé diferentes alineaciones flexibles como centro, inicio, línea de base, etc., pero fue en vano. La forma más fácil y limpia de ajustar solo el ícono fue establecer que contenga div en position: relative; top: XX;Esto hizo el trabajo perfectamente.

Bueno, esta pregunta se hizo hace años. Creo que la tecnología ha cambiado bastante y la compatibilidad del navegador es mucho mejor. Podría usar la alineación vertical, pero consideraría que algunos son menos escalables y menos reutilizables. Recomendaría un enfoque de flexbox .

Aquí está el mismo ejemplo que el póster original utilizado pero con flexbox. Da estilo a un solo elemento. Si el tamaño de un botón cambia por cualquier razón, continuará estando centrado vertical y horizontalmente.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Ejemplo: JsFiddle

Simplemente defina la vertical-alignpropiedad para el elemento de icono:

div .icon {
   vertical-align: middle;
}