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

Question

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

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

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

Результат:

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

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

    <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 и display: table-cell), но это не вариант, потому что он должен работать со всеми типами браузеров ( настольный и мобильный).

К тому же я не знаю никаких размеров. Ни изображения, ни текста. Поэтому я не могу использовать какое-либо «решение для отступа или отступа».

РЕДАКТИРОВАТЬ : Я создал демо-скрипку (на основе того, что создал NGLN, кстати: спасибо за это!), Который показывает результат, который я ищу , Но я пытаюсь архивировать это без использования display: table-cell ... какие-нибудь идеи?

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

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

Таким образом, независимо от того, какой элемент имеет большую высоту, текст и изображение всегда будут выровнены по середине.

Answer 3

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

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

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

Answer 4

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