Respuestas:
Usar en line-height:50px;
lugar de altura. Eso debería hacer el truco ;)
Tenga en cuenta que el line-height
enfoque falla si tiene una oración larga en la span
que se rompe la línea porque no hay suficiente espacio. En este caso, tendría dos líneas con un espacio con la altura de los N píxeles especificados en la propiedad.
Me atasqué cuando quería mostrar una imagen con texto centrado verticalmente en su lado derecho que funciona en una aplicación web receptiva. Como base utilizo el enfoque sugerido por Eric Nickus y Felipe Tadeo.
Si quieres lograr:
y esto:
.container {
background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
display: inline-block;
background-size: 40px 40px; /* image's size */
height: 40px; /* image's height */
padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}
.container span {
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}
<span class="container">
<span>This is a centered sentence next to an image</span>
</span>
Esta es la forma más sencilla de hacerlo si necesita varias líneas. Envuelva span
el texto en otro span
y especifique su altura con line-height
. El truco para múltiples líneas está restableciendo los interiores span
's line-height
.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
Por supuesto, el exterior span
podría ser un div
o qué
span
s, como cualquier otro elemento en línea, puede contener cualquier elemento en línea HTML . De todos modos, escribí que textvalignmiddle
puede ser un div
caso si es necesario (y puedes configurarlo display:inline;
si eres tan reacio a usarlo spans
)
span
es el contenedor genérico en línea para html y no da pistas de ser solo texto; `Se puede usar para agrupar elementos con fines de estilo ...`. Sugiero leer la especificación antes de aplicar sus estándares de codificación personal a otros
La forma flexbox:
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.foo
que un lapso display: flex-inline
encajaría mejor
Necesitaba esto para los enlaces, así que envolví el lapso con una etiqueta a y un div, luego centré la etiqueta del tramo en sí
HTML
<div>
<a class="tester" href="#">
<span>Home</span>
</a>
</div>
CSS
.tester{
display: inline-block;
width: 9em;
height: 3em;
text-align: center;
}
.tester>span{
position: relative;
top: 25%;
}
Imagen y texto de centro vertical CSS
Tengo Create one demo for vertical image center and text también tengo prueba en firefox, chrome, safari, internet explorer 9 y 8 también.
Es muy corto y fácil css y html, verifique el código a continuación y puede encontrar la salida en screenhort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
El atributo css de alineación vertical no hace lo que espera desafortunadamente. Este artículo explica 2 formas de alinear verticalmente un elemento usando css.
Establezca padding-top como un valor apropiado para empujar la x hacia abajo, luego reste el valor que tiene para padding-top de la altura.