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


231

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.


2
Eres un dios En serio, pasé 2 horas en esto hoy, su solución fue, con diferencia, la más limpia. No es necesario codificar nada.
Chuck

este enfoque es el más fácil
Raveen Beemsingh

Respuestas:


304

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


1
Sí, esta es una mejor solución, gracias. Todavía parece requerir altura de línea, aunque jsfiddle.net/paulftw/F3KyK/41
Paul

1
Actualicé su jsfiddle para saber cómo lo haría. Usé el tamaño de fuente para el icono en lugar de usar el 2x. jsfiddle.net/3GMjp/1
andxyz

En su primer fragmento de código, la etiqueta de inicio <span> no corresponde con la etiqueta de finalización </i>.
jzacharuk

No funciona con algunos de los íconos. Ejemplo de fa-angle-left
steakchaser el

Es importante darse cuenta de que incluir los archivos js de fontawesome también puede modificar el aspecto. Mi ícono estaba demasiado arriba, borré la inclusión de js para ver qué pasaría y ahora está demasiado abajo
--.-

53

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.


77
En mi opinión, esta debería ser la respuesta aceptada, ya que es, con mucho, la solución más simple, a menos que me falte algo en la pregunta original. Gracias @rushonerok! No estoy seguro de por qué algunas personas dicen que no deben usarse vertical-align: middle;: es posible que me falte algo aquí. Por favor explique si es así.
Kendall

1
@Kendall Roth Creo que cuando la gente dice que no use vertical-align: middle, quieren decir si está usando blockelementos . Si está utilizando inline, inline-blocko table-cell, debería ser bueno. MDN:vertical-align
rinogo

Funciona como encanto! Gracias: D
Mohammed A. Fadil

37

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;
}

2
¿Qué pasa si su contenedor es más grande que 50px? Entonces no funcionará ... Tengo contenido que cambia de tamaño y debería tener un icono centrado en el interior ... ¿alguna idea sobre eso?
Slaven Tomac

24

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.


16

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/


1
Esto puede centrar un icono verticalmente dentro de un div, no solo dentro de una línea de texto. ¡Funciona genial!
Sean the Bean

@ quien quiera tratar de editar esto: este es generalmente mi estilo de diseño para las respuestas. Creo que lo hace más legible / comprensible y permite a las personas saber mejor a dónde van antes de hacer clic en el enlace. En el caso de la URL alojada de FA, algunas personas tienen la costumbre de resaltar un enlace para copiarlo, es por eso que está escrito en su totalidad. Los enlaces jsfiddle tienen un encabezado para dividir mejor la página, de lo contrario es más fácil pasar por alto y las respuestas pueden verse desordenadas.
Hastig Zusammenstellen

11

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

i.fa {
    vertical-align: middle;
}

3
.svg-inline--fapara FontAwesome 5
darylknight

@darylknight, ¿qué significa esto? ¿Cómo activaría / usaría eso? Añadir algo después de mi fa-clocken la clase?
Prof. Falken

5

Esto funcionó bien para mí.

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

3

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


2

Para aquellos que usan Bootstrap 4 es simple:

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

Esto no tiene ningún uso como alineación vertical: el medio que aplica esta clase solo está dirigido a tablas.
Lucas Manzke

1

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
}

1

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;
}

44
La alineación vertical no hace nada en los elementos de bloque, solo funciona en elementos en línea o de celda de tabla.
cimmanon

Ya veo, establecer line-height = altura del contenedor y las cosas flotantes dejaron de funcionar y necesitan menos tipeo. Aquí hay un violín actualizado con ruido reducido: jsfiddle.net/F3KyK/7
Paul

Es mejor simplemente configurar vertical-align: middleel icono y el texto. De esa manera no estás haciendo suposiciones sobre la altura del icono y hay menos CSS.
Maros

0

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.


0

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


0

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

div .icon {
   vertical-align: middle;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.