请选择 进入手机版 | 继续访问电脑版
f
  • A 首页
  • P 发现
  • G 手机版
  • J 更多
  • 注册
  • QQ登录

您的等级不够,“高级及以上会员” 开启

知道啦!

您的等级不够,“vip会员”开启

知道啦!

CSS样式中图片属性设置(缩放与对齐方式)

小七 发表于 2017-05-03 15:52 复制链接
阅读数:8570
上一节介绍了边框,这一节介绍图片在CSS中的缩放与对齐,其实跟文字的差不多的原理,为了更加清晰的看到对齐的效果,我们把演示图片采用一个正方形的Logo,就是我们七街红色的方块部分,放在表格(关于CSS中的表格用法后面会单独讲解)中进行示范,表格都加上边框,以便对照,完整的演示代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img.testone{
            width:100px;
                        height:100px;
                        }
</style>
</head>
<body>
<table width="600" height="363" border="1">
  <tr>
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
  </tr>
  <tr>
    <td width="150" height="150"><img src="bbs-logo.gif" class="testone"/></td>
    <td width="150" style="text-align:center;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:left;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:right;"><img src="bbs-logo.gif" width="46" height="46" /></td>
  </tr>
  <tr>
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
    <td width="150" style="text-align:center; vertical-align:middle;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:left; vertical-align:bottom;"><img src="bbs-logo.gif" width="46" height="46" /></td>
        <td width="150" style="text-align:right; vertical-align:top;"><img src="bbs-logo.gif" width="46" height="46" /></td>
  </tr>
</table>
</body>
</html>


head里面的css部分定义了一个图片的类testone让图片的高度和宽度均缩放到100px。
表格的第一行作为对照行,使用logo原始的宽度和高度,不做修饰;
第二行第一列,img标签引入css,即可看到效果;
第二行第二列,text-align:center;这个是让图片水平方向居中显示;
第二行第三列,text-align:left;这个是让图片水平方向靠左显示,其实默认的就是靠左的;
第二行第四列,text-align:right;让图片水平方向靠右显示;
第三行第一列,同样作为对照行,不加css修饰;
第三行第二列,与上面对照行的区别是,垂直方向也居中了;
第三行第三列,与上面对照行的区别是,垂直方向靠左;
第三行第四列,与上面对招行的区别是,垂直方向靠右;
返回列表
16 条评论
您需要登录后才可以评论 | 注册
烨水朱华 发表于 2017-05-03 16:53
阅读全部 2
vertical-align  这个确实有用
pertepan 发表于 2017-05-03 23:26
阅读全部 3
楼主说得很好,学习了
ice2andy 发表于 2017-05-04 09:05
阅读全部 4

vertical-align  是比较值得注意的属性。
shxieli 发表于 2017-05-04 09:16
阅读全部 5

楼主说得很好,学习了
小七 发表于 2017-05-04 09:58
阅读全部 6
ice2andy 发表于 2017-5-4 09:05
vertical-align  是比较值得注意的属性。

正文里面的配图通常是居中比较合理,好看
新乡振动筛优化 发表于 2017-05-04 09:59
阅读全部 7
写的不错,真心不错,顶一个
beijita455 发表于 2017-05-04 10:03
阅读全部 8
学习了学习了学习了
外汇高手 发表于 2017-05-04 11:43
阅读全部 9
学习了,
xingcuide2 发表于 2017-05-04 13:46
阅读全部 10
相关推荐