imagen - texto vertical tabla html
¿Cómo centrar el texto verticalmente con un gran icono de fuente impresionante? (13)
Bueno, esta pregunta fue hecha 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 es algo menos escalable y menos reutilizable. Yo recomendaría un enfoque de flexbox .
Aquí está el mismo ejemplo que usó el póster original pero con flexbox. Da forma a un solo elemento. Si el tamaño de un botón cambia por cualquier motivo, seguirá centrado vertical y horizontalmente.
.button {
border: 1px solid #ccc;
height: 40px;
margin: 60px;
padding: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
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 solución posible: http://jsfiddle.net/CLdeG/1/ pero se siente un poco pirateada: introduce una etiqueta p adicional, usa pull-left y display: table. Tal vez alguien pueda sugerir una manera más fácil.
Cuando se utiliza un flexbox, la alineación vertical de los íconos de fuentes impresionantes 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., sin éxito. La forma más fácil y limpia de ajustar solo el ícono fue establecer que contenga div en position: relative; top: XX; position: relative; top: XX; Esto hizo el trabajo perfectamente.
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 Jsfiddle Demo
CSS:
div {
border: 1px solid #ccc;
display: inline-block;
height: 50px;
margin: 60px;
padding: 10px;
}
#text, #ico {
line-height: 50px;
}
#ico {
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 envoltorio (digamos, 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 gráfico svg .
La forma más sencilla es establecer la propiedad css de alineación vertical en el medio
i.fa {
vertical-align: middle;
}
Las fuentes tienen la solución como estándar, la uso cuando tengo que centrar un ícono en una cadena: https://fontawesome.com/how-to-use/svg-with-js
Otra opción para ajustar la altura de línea de un icono es usar un porcentaje de la propiedad de vertical-align . Por lo general, el 0% es la parte inferior y el 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
}
Solo tuve que hacer esto yo mismo, tienes que hacerlo al revés.
- No juegues con la alineación vertical de tu texto
- Juega con la alineación vertical del icono de fuente impresionante
<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 de css. Pero esto funciona de una manera de copiar y pegar.
Consulte aquí: alineación vertical del texto y el icono en el botón de arranque
Sin embargo, si dependiera de mí, no usaría el icono-2x. Y simplemente especifique el tamaño de la 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 ver un ejemplo http://jsfiddle.net/3GMjp/77/ , consulte http://jsfiddle.net/3GMjp/77/
Utilizo los í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 que sea necesaria.
Yo envolvería el texto de forma que pueda orientarlo por separado. Ahora, si flota ambos a la izquierda, puede usar la altura de la línea para controlar el espaciado vertical de. Al configurarlo a la misma altura que el (30px), se alineará en el medio. Consulte aquí: http://jsfiddle.net/F3KyK/4/
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;
}
si las cosas no se alinean, una simple line-height: inherit; a través de CSS en elementos i.fa específicos que tienen problemas de alineación podrían hacer el truco lo suficiente.
También podría utilizar una solución global, que debido a una especificidad de CSS ligeramente más alta anulará la regla .fa de FontAwesome que especifica line-height: 1 sin necesidad de !important en la propiedad:
i.fa {
line-height: inherit;
}
Solo asegúrese de que la solución global anterior no cause ningún otro problema en los lugares donde también podría usar los íconos de FontAwesome.
una opción de flexbox
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="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class=''icon icon-2x icon-camera''></i>
hello world
</div>
violín