How to vertically align alternative text inside a floating image?

Question

Having tried some solutions related to vertical alignment, I seem to be unable to solve this. Not sure if anyone can help me with this. All I want to do is position the alternate text in the middle of a blank image.

This is the html code:

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

And this is the css code:

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

Thanks for taking the time to read.

Answer 1

edit 2017: Flexbox FTW (possibly with a as an element of flexibility (its container has a vertical / second axis by default align-items: stretch ) and a flexible container (then vertical alignment is achieved using flex-direction:column and justify-content: whatisneeded )

I believe that @alt has a height of its content, much less than 100px.

By setting the line height equal to the height, vetical-align will do what you intend to do.
Here is the fiddle: http://jsfiddle.net/PhilippeVay/Xevph/

Answer 2

No, you cannot do this. But you can change the color and display properties, for example

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

Here's a cool tip, first check if there is an ie file, the uploaded image is avaialble or not, if not, then you will see a div with alt attribute text in this DIV.