Как вертикально выравнивать альтернативный текст внутри плавающего изображения?

Question

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

Это HTML-код:

<div class="viewport"> 
<a href="#"> 
    <img src="http://yahoo.com/" alt="no image" /> 
</a> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 
</div> 

И это код CSS:

.viewport { 
background: #bbb; 
width: 350px; 
height: 300px; 
padding: 5px; 
} 

.viewport img { 
float: left; 
margin: 5px; 
width: 100px; 
height: 100px; 
background: #000; 
text-align: center; 
} 

.viewport div { 
margin-left: 20px; 
} 

Спасибо, что нашли время, чтобы прочитать.

Answer 1

редактировать 2017: Flexbox FTW (возможно, с a как в качестве гибкого элемента (его контейнер, имеющий по умолчанию вертикальный/второй оси align-items: stretch) и гибкий контейнер (вертикальное выравнивание затем достигается с flex-direction:column и justify-content: whatisneeded)

Я считаю, @alt имеет высоту его содержание, гораздо меньше, чем 100px.

по фиксируя высоту строки, равную высоте, vetical-align будет делать то, что вы собираетесь это сделать.
Здесь я s a скрипка: http://jsfiddle.net/PhilippeVay/Xevph/

Answer 2

нет вы не можете сделать это. Но вы можете изменить цвет и свойства отображения, как

img[alt]{ 
color:red; 
display:none; 
} 

Вот прохладный наконечник, сначала проверьте, если файл существует то изображение, которое вы загружаете в avaialble или нет, если нет, то отображаться в DIV с атрибутом альт текст в этом DIV.