una imagen y un texto de varias líneas

Question

Estoy tratando de alinear una imagen y un texto verticalmente:

 
+-------------------------+ -- Viewport 
|   Text text text | 
| +-----+ text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
|   text text text | 
+-------------------------+ 

Esto funciona bien, si el texto no se ajusta. Si el Texto es más ancho que el ancho de la ventana gráfica, ya no funciona. Creo que esto es causado por el establecimiento de display: inline-block:

<a href="#"> 
    <img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" /> 
    <span style="display: inline-block; vertical-align: middle;"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore 
    </span> 
</a> 

El resultado:

 
+---------------------------------------------------------------------+ -- Viewport 
|                  |                
| +-----+                | 
| |IMAGE| text text text text text text text text text text text text | 
| +-----+                |               
|                  | 
+---------------------------------------------------------------------+ 

+-------------------------+ -- Viewport 
| +-----+ Text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
| text text text text  | 
+-------------------------+ 

Si trato de flotar los elementos, la imagen será siempre en la parte superior, pero no vertical- aligend en medio del texto:

<a href="#"> 
     <img style="display: block; vertical-align: middle; margin-right: 8px; float: left;" src="/images/arrow_black.png" /> 
     <span style="display: block; overflow: auto;"> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
     </span> 
    </a> 

el resultado:

 
+-------------------------+ -- Viewport 
| +-----+ Text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
|   text text text | 
|   text text text | 
|   text text text | 
+-------------------------+ 

He visto varias soluciones para este problema, usando html-tables o css-tables (display: table and display: table-cell), pero esta no es una opción, porque debe funcionar con todos los tipos de navegadores (desktop y móvil).

Para eso, no conozco ningún tamaño. Ni de la imagen ni del texto. Entonces no puedo usar ninguna "solución de margen o relleno".

EDITAR: He creado un demo-fiddle (basado en el NGLN ha creado, por cierto: Gracias por eso) que muestran el resultado estoy buscando. Pero trato de archivar esto sin usar display: table-cell ... ¿alguna idea?

Answer 1

Si puede estimar la relación entre el ancho de la imagen y el ancho del texto, le recomendaría establecer un ancho de porcentaje en el lapso de texto.

Answer 2

Dijiste que no puedes usar las respuestas de margen/relleno debido a que no conoces el tamaño. Sin embargo, ¿por qué no usar solo el porcentaje para poner la imagen a la mitad, y luego dividir todo en divs?

<div id="viewport"> 
    <div id="image"> 
     <img src="http://source..." /> 
    </div> 
    <div id="text"> 
     Whatever 
    </div> 
</div> 

Y luego, en el CSS, haga lo siguiente:

#viewport { 
    width:800px; 
    height:500px; 
    border:1px solid #FFF; 
}  

#image { 
    width: 400px; 
    float:left; 
    height:100%; 
    text-align: center; 
} 

img { 
    margin-top:50%; 
} 

#text { 
    width:300px; 
    float:left; 
} 

Obviamente todas las anchuras y alturas puede ser porcentajes o como desee para manejarlos. Sin embargo, esto debería representar cómo lo desea. Espero entender tu pregunta correctamente.

Answer 3

¿Se refiere a algo así como this demo fiddle?

HTML:

<div id="viewport"> 
    <a href="#"> 
     <img src="images/arrow_black.png" alt="" /> 
     <span>Lorem ipsum dolor...</span> 
    </a> 
</div> 

CSS:

#viewport { 
    background: #bbb; 
    width: 350px; 
    padding: 5px; 
    position: relative; 
} 
#viewport img { 
    position: absolute; 
    top: 50%; 
    margin-top: -30px; /* = image height div 2 */ 
} 
#viewport span { 
    margin-left: 68px; /* = image width + 8 */ 
    display: block;  
} 

Answer 4

Ésta es una manera que no estoy orgulloso, pero es la única forma que conozco para archivar esto sin js o FlexBox.

#viewport { 
 
    width: 350px; 
 
    padding: 5px; 
 
    position: relative; 
 
} 
 

 
#viewport a { 
 
    background: #bbb; 
 
    display: inline-block; 
 
} 
 

 
#viewport img { 
 
    display: block; 
 
} 
 

 
#viewport i, 
 
#viewport span { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
/* Using padding to add gutter 
 
between the image and the text*/ 
 
#viewport span { 
 
    padding-left: 15px; 
 
}

<div id="viewport"> 
 
    <a href="#"> 
 
     <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> 
 
     <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> 
 
    </a> 
 
    
 
    <a href="#"> 
 
     <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> 
 
     <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> 
 
    </a> 
 
</div>

De esta manera no importa qué elemento tiene más altura, el texto y la imagen siempre se alinearán con el medio.