灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:4314回复:0

CSS属性Vertical Align使用方法

楼主#
更多 发布于:2011-12-27 12:27
 CSS有一个属性叫Vertical Align。当你第一次学习它的时候会有些困惑,因此我觉得我们可以通过它的用法来了解它。最基本的用法像这样:

  img{

  vertical-align: middle;

  }

  注意在这个应用案例中,它被应用到了img元素上。图片通常是行内元素,意味着它通常是和文字在一起的。但是到底”在一起”确切的是什么意思?这就是Vertical-align所要解决的。

  有效值为:baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

  我认为最让人使人困惑的是,当大家尝试着给块级元素使用vertical-align时,却得不到任何结果。如果你有一个大一些div,其中包含一个小的div,你希望小的能够在大的之内垂直居中对其,vertical-align没法帮到你。Douglas Heriot有好方法来实现这种效果。

  Baseline

  vertical-align默认的值就是baseline(如果你没有做任何声明的话)。图片会和文字以文字基线为准对其。注意下行字母降到了基线以下。图片不会和下行字母的最下端对齐,那不是基线。

  

图片:58_3710_c5bdc831c9cfbef.jpg



喜欢0 评分0
游客

返回顶部