middle属性不居中问题

ID:6773153

大小:40.50 KB

页数:3页

时间:2018-01-25

middle属性不居中问题_第1页
middle属性不居中问题_第2页
middle属性不居中问题_第3页
资源描述:

《middle属性不居中问题》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库

1、vertical-align:middle属性不居中问题利用vertical-align:middle来实现垂直居中了,因为class="wall"的div填充了整个页面,所以只要让图片在class="wall"的div里面垂直居中就达到目的了。以前总是以为vertical-align与text-align是同样的道理,一个是垂直居中,一个是水平居中,只要给class="wall"的div加上一个vertical-align:middle就能让图片垂直居中,结果一点效果也没有。事实上vertic

2、al-align与text-align完全不一样,给class="wall"的div加上一个text-align:center的话,毫无疑问是可以让里面的img水平居中,但vertical-align却不能这样子用。先看一下W3C上对vertical-align的定义:vertical-align属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式

3、。必须承认这句话我看了很久才看懂说的是神马意思,我的理解是它有两种用法:第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业

4、的语言我不会说的,可以打个比喻:假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:说到这里,思路就清晰了(PS:理应知道vertical-align可以设middle,top,bottom等等,甚至可以设置具体的值或百分比,如果想知道会有怎样的效果,可

5、以自己实验一下,这里就不多说了。)。接下来回到这篇文章的主题,现在我要让class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical-align:middle样式,那么img就可以在div里面垂直居中了。如图:按照这个思路,完整的页面代码就出来了:1

6、L1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2345404页面67body{margin:0;background:#333;_height:100%;}8.wall{width:100%;height:100%;p

7、osition:absolute;left:0;top:0;text-align:center;font-size:0;}9.img404{border:0;width:700px;vertical-align:middle;}10.verticalAlign{vertical-align:middle;display:inline-block;height:100%;width:1px;margin-left:-1px;}11121314

8、ss="wall">151617

1819以上的CSS里面值得一提的是.verticalAlign,加一个display:inline-block是为了触发它的layout,以让本来没有layout的span可以设置宽和高,margin-lef

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
正文描述:

《middle属性不居中问题》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库

1、vertical-align:middle属性不居中问题利用vertical-align:middle来实现垂直居中了,因为class="wall"的div填充了整个页面,所以只要让图片在class="wall"的div里面垂直居中就达到目的了。以前总是以为vertical-align与text-align是同样的道理,一个是垂直居中,一个是水平居中,只要给class="wall"的div加上一个vertical-align:middle就能让图片垂直居中,结果一点效果也没有。事实上vertic

2、al-align与text-align完全不一样,给class="wall"的div加上一个text-align:center的话,毫无疑问是可以让里面的img水平居中,但vertical-align却不能这样子用。先看一下W3C上对vertical-align的定义:vertical-align属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式

3、。必须承认这句话我看了很久才看懂说的是神马意思,我的理解是它有两种用法:第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业

4、的语言我不会说的,可以打个比喻:假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:说到这里,思路就清晰了(PS:理应知道vertical-align可以设middle,top,bottom等等,甚至可以设置具体的值或百分比,如果想知道会有怎样的效果,可

5、以自己实验一下,这里就不多说了。)。接下来回到这篇文章的主题,现在我要让class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical-align:middle样式,那么img就可以在div里面垂直居中了。如图:按照这个思路,完整的页面代码就出来了:1

6、L1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2345404页面67body{margin:0;background:#333;_height:100%;}8.wall{width:100%;height:100%;p

7、osition:absolute;left:0;top:0;text-align:center;font-size:0;}9.img404{border:0;width:700px;vertical-align:middle;}10.verticalAlign{vertical-align:middle;display:inline-block;height:100%;width:1px;margin-left:-1px;}11121314

8、ss="wall">151617

显示全部收起
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签
关闭