浮遊画像内の代替テキストを縦に並べる方法は？

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は、あなたがそれをするつもり何だろう。
ここで私は、あなたのバイブル：http://jsfiddle.net/PhilippeVay/Xevph/

Answer 2

これはできません。しかし、あなたは、ファイルは、あなたがロードされている画像がavaialble、すなわち存在する場合や、その後alt属性を持つdiv要素を表示しないではない場合はここでクールな先端、最初のチェックである

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

のような色と表示プロパティを変更することができますそのDIV内のテキスト。