今天在学习查阅代码的时候,发现了一个不认识的CSS代码,于是进行学习。
<html> <head> <style type="text/css"> img.top { vertical-align:text-top; } img.bottom { vertical-align:text-bottom; } img.middle { vertical-align:middle; } </style> </head> <body> <p> 这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。 </p> <p> 这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。 </p> <p> 这是一幅<img class="middle" border="0" src="/i/eg_cute.gif" />位于段落中的图像。 </p> </body> </html>
效果图
使图片在对应的元素内以不同的方式进行垂直对齐