Vertical align an image and a multiline text

Question

I´m trying to align an image and a text vertically:

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

This works fine, if the text is not wrapped. If the Text is wider than the viewport-width, it does not work anymore. I think this is caused by setting 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>

The result:

+---------------------------------------------------------------------+ -- 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     | 
+-------------------------+ 

If I try to float the elements, the image will always be on top, but not vertical-aligend in the middle of the text:

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

The result:

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

I´ve seen several solutions for this problem, using html-tables or css-tables (display: table and display: table-cell), but this is not an option, because it must work with all types of browsers (desktop and mobile).

To that, I do not know any sizes. Neither of the image nor of the text. So I can't use any "margin- or padding-Solution".

EDIT: I´ve created a demo-fiddle (based on the one NGLN has created, BTW: Thanks for that!) that show the result i´m looking for. But I try to archive this without using display: table-cell... any ideas?

Answer 1

Do you mean something like 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 2

This is a way that I'm not proud of, but it's the only way I know to archive this without js or 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>

This way no matter which element has more height, the text and the image will always be aligned to the middle.

Answer 3

If you can estimate the ratio between the image width and text width I'd recommend setting a percentage width on the text span.

Answer 4

You said you can't use margin/padding answers because of not knowing size. However, why not just use percentage to put the image halfway down, then split everything up into divs?

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

And then in your CSS, do this:

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

Obviously all the widths and heights can be percentages or however you wish to handle them. However, this should render how you want it to. Hope I am understanding your question correctly.