Вертикальное выравнивание изображения и многострочного текста

Я пытаюсь выровнять изображение и текст по вертикали:

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

Это отлично работает, если текст не завернут. Если текст шире ширины видового экрана, он больше не работает. Я думаю, что это вызвано установкой отображения: встроенный блок:

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

Результат:

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

Если я пытаюсь поместить элементы, изображение всегда будет сверху, но не вертикально-aligend в середине текста:

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

Результат:

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

Я видел несколько решений для этой проблемы, используя html-таблицы или css-таблицы (display: table and display: table-cell), но это не вариант, потому что он должен работать со всеми типами браузеров ( рабочий стол и мобильный телефон).

Для этого я не знаю размеров. Ни изображение, ни текст. Поэтому я не могу использовать "margin-or padding-Solution".

EDIT. Я создал демонстрационную скрипту (на основе того, что создал NGLN, BTW: Спасибо за это!), Которые показывают результат, который я ищу. Но я пытаюсь архивировать это без использования display: table-cell... любые идеи?

Ответ 1

Вы имеете в виду что-то вроде этой демонстрационной скрипты?

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

Ответ 2

Это способ, которым я не горжусь, но это единственный способ, который я знаю, чтобы архивировать это без js или 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>

Ответ 3

Если вы можете оценить соотношение между шириной и шириной текста, я бы рекомендовал установить процентную ширину в тексте.

Ответ 4

Вы сказали, что не можете использовать ответы на разницу/заполнение из-за незнания размера. Однако почему бы просто не использовать процент, чтобы поместить изображение на полпути вниз, а затем разбить все на divs?

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

И затем в вашем CSS сделайте следующее:

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

Очевидно, что все ширины и высоты могут быть процентами или же вы хотите их обработать. Однако это должно показать, как вы этого хотите. Надеюсь, я правильно понимаю ваш вопрос.