图片与文字对齐方式 - 洛阳翼展电脑


图片与文字对齐方式

2022-8-24 乱云飞 标签: 图片对齐方式 图片上对齐 图片文本对齐 居中对齐

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>图片与文字的相对位置</title>
  6. <style>
  7. img{
  8. width: 160px;
  9. height: 126px;
  10. margin: 10px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h3>图片与文字的相对位置</h3>
  16. <!-- absmiddle 图片中间与同一行最大元素中间对齐;
  17. absbottom 图片下边缘与同一行最大元素下边缘对齐;
  18. baseline 图片下边缘与第一行文本下边缘对齐;
  19. bottom 图像下边缘与第一行文本下边缘对齐;
  20. left 图像沿网页左边缘对齐,文字在图像向右边换行;
  21. middle 图像中间与第一行文本的下边缘对齐;
  22. notset 未设定对齐方式;
  23. right 图像沿网页的右边缘对齐,文字在图像左边换行;
  24. texttop 图片上边缘与同一行最高文本上边缘对齐;
  25. top 图片上边缘与同一行最高元素上边缘对齐。-->
  26. <!--图片中间与同一行最大元素中间对齐-->
  27. <img src="../image/ab1.jpg" align="absmiddle"/>
  28. <!--图片下边缘与同一行最大元素下边缘对齐-->
  29. <img src="../image/ab2.jpg" align="absbottom"/>
  30. <!--图片下边缘与第一行文本下边缘对齐-->
  31. <img src="../image/ab3.jpg" align="baseline"/>
  32. <!--图像下边缘与第一行文本下边缘对齐-->
  33. <img src="../image/ab4.jpg" align="bottom"/>
  34. <!--图像沿网页左边缘对齐,文字在图像向右边换行-->
  35. <img src="../image/ab5.jpg" align="left"/>
  36. <!--图像中间与第一行文本的下边缘对齐-->
  37. <img src="../image/ab6.jpg" align="middle"/>
  38. <!--未设定对齐方式-->
  39. <img src="../image/ab7.jpg" align="notset"/>
  40. <!--图像沿网页的右边缘对齐,文字在图像左边换行-->
  41. <img src="../image/ab8.jpg" align="right"/>
  42. <!--图片上边缘与同一行最高文本上边缘对齐-->
  43. <img src="../image/ab9.jpg" align="texttop"/>
  44. <!--图片上边缘与同一行最高元素上边缘对齐-->
  45. <img src="../image/ab10.jpg" align="top"/>
  46. </body>
  47. </html>
本文链接:http://80c.cc/ez/571.html
0

发表评论:

VirtualCamera:在录像机中虚拟一个通道显示电脑桌面、视频文件、USB摄像头~
预ICP备10086-001号 © 翼展网/80C.CC 技术支持/洛阳翼展科技
TEL / 13213610060 QQ / 345794501
Powered by emlog