探讨vertical-align应用

与valign的对比

vertical-align在小雨手册上的解释是：设置或检索对象内容的垂直对其方式。我觉得不太理解的是vertical-align所在的分类是“属性/文本”

O3noBLOG特别强调的是vertical-align和valign的不同，的确vertical-align应用最多的应该是在td内，控制内部对象位置，和td的valign属性极其相似。

valign共有四个参数：top, baseline, bottom, middle，相对而言vertical-align也有相同的属性值，以下是对td控制对比：

使用vertical-align:top;来避免td默认的valign="middle"是很好的选择，当然也可以使用vertical-align:middle;来对td控制，但对div肯定也是无效的。

效果演示：http://www.rexsong.com/blog/attachments/20...1246_valign.htm

与align的对比

按照w3的提示，使用vertical-align使用在inline对象上，比如对img的控制，于是又和img的align属性类似。

使用align="absmiddle"控制img绝对居中的时候，也可以尝试使用vertical-align:middle;，做个对比看的更清楚：

所以真正的绝对居中还是align="absmiddle"，这是使用CSS不可替代的。

效果演示：http://www.rexsong.com/blog/attachments/20...41444_align.htm

inline应用

用来决定inline对象的垂直位置，看两个例子：

小图：http://www.rexsong.com/blog/attachments/20...ignmenttest.htm
大图：http://www.rexsong.com/blog/attachments/20...rticalalign.htm

赞 (0)

相关推荐

  • highcharts 在angular中的使用示例代码

    highcharts 在angular中的使用示例代码

    本文介绍了highcharts 在angular中的使用示例代码,分享给大家.具体如下: 网址 https://www.hcharts.cn/demo/highcharts https://github.com/pablojim/highcharts-ng 安装依赖 npm install highcharts-ng --save 引入依赖 'highcharts/highcharts.src.js', 'highcharts-ng/dist/highcharts-ng.min.js' 注入依赖

  • 经常用的图片在容器中的水平垂直居中实例

    这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:"Centering an image of unknown size in an outer container of known size". 这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE分别写了二套简单的样式. IE使用inline-blocks,非IE使用table-cell and vertic

  • 无js5款纯div+css制作的弹出菜单标准

    一.最基本的:二级dropdown弹出菜单 二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; mar

  • 转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）

    这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:"Centering an image of unknown size in an outer container of known size", 作者:Stu Nicholls form:http://www.cssplay.co.uk/menu/centered.html ,发表日期:15th October 2006. 此文由forestgan于2006-10-17翻译发表,更多文章. 这个水平和垂直居中

  • Div+Css(+Js)菜单代码及制作工具

    Div+Css(+Js)菜单代码及制作工具

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • 网页制作中十个最好的CSS hacks

    If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I've written about some of them earlier

  • css+js下拉菜单

    css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla

  • jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】

    jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts绘制2D柱状图.折线图的组合双轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合双轴图</title> <script type="text/javascript"

  • jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

    jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts实现2D柱状图.折线图的组合多轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合多轴图</title> <script type="text/javascript"

  • jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

    jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src=&q

随机推荐