请选择 进入手机版 | 继续访问电脑版
  • 注册
  • 登录
*本站广告为第三方自助投放。发生纠纷,向本站索取第三方联系方式沟通。

CSS样式中图片属性设置(缩放与对齐方式)[复制链接]

小七 发表于 2017-05-0315:52 显示全部楼层 阅读模式
+1
8752°C
16
  • 烨水朱华
  • pertepan
  • ice2andy
  • shxieli
  • 小七
过: 他们
上一节介绍了边框,这一节介绍图片在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-0316:53 显示全部楼层
vertical-align  这个确实有用
pertepan 发表于 2017-05-0323:26 显示全部楼层
楼主说得很好,学习了
ice2andy 发表于 2017-05-0409:05 显示全部楼层

vertical-align  是比较值得注意的属性。
shxieli 发表于 2017-05-0409:16 显示全部楼层

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

正文里面的配图通常是居中比较合理,好看
新乡振动筛优化 发表于 2017-05-0409:59 显示全部楼层
写的不错,真心不错,顶一个
beijita455 发表于 2017-05-0410:03 显示全部楼层
学习了学习了学习了
外汇高手 发表于 2017-05-0411:43 显示全部楼层
学习了,
xingcuide2 发表于 2017-05-0413:46 显示全部楼层
相关推荐

小七 官方

头衔 : 起个好听的头衔

签名 : 一句话描述自己