Take the 2-minute tour ×  Having tried some of the solutions
relating to vertical align, I don't seem to be able to solve
this. Not sure if anyone can help me on this. All I want is to
position the alternate text in the middle of an empty image.
This is the html code:  <div class="viewport">  <a href="#">
<img src="http://yahoo.com/" alt="no image" />  <div>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor  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 your time to read.  share|improve
this question add comment  2 Answers  up vote 3 down vote
accepted  I believe @alt has the height of its content, far less
than 100px.  By fixing a line-height equal to height, vetical-
align will do what you intend it to do. Here is a fiddle:
http://jsfiddle.net/Philipp