line-height对于img元素并不起作用:
<div style="height:250px;background:#ccc;line-height:250px;width:400px;text-align:center;"> <img alt="App Tools on File-Software.com" src="http://www.google.com/intl/en/images/logo.gif" width="140"> </div>
line-height对于box内的文本起作用,图片跟随着文字的基线对准:
<div style="height:250px;background:#ccc;line-height:250px;width:400px;text-align:center"> A test paragraph<img alt="App Tools on File-Software.com" src="http://www.google.com/intl/en/images/logo.gif" width="140"> </div>
再设置img的vertical-align:middle;就可以让图片垂直居中:
<div style="height:250px;background:#ccc;line-height:250px;width:400px;text-align:center"> A test paragraph<img alt="App Tools on File-Software.com" src="http://www.google.com/intl/en/images/logo.gif" width="140" style="vertical-align:middle;"> </div>
<div style="height:250px;background:#ccc;line-height:250px;font-size:1px;width:400px;text-align:center;text-indent:-1px;color:#ccc"> .<img alt="App Tools on File-Software.com" src="http://www.google.com/intl/en/images/logo.gif" width="140" style="vertical-align:middle;"> </div>