为什么设置的vertical-align垂直居中不起作用:
vertical-align属性可能使用并不是太频繁，但是有时候可能会使用vertical-align:middle设置对象内部的元素垂直居中对齐，但是有时候会发现此设置并非都会产生效果。代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">td{ width:200px; height:200px; border:1px solid red; vertical-align:bottom;}div{ width:60px; height:60px; background-color:#690;}</style></head><body><table> <tr> <td><div></div></td> </tr></table></body></html>从以上代码的表现可以看出vertical-align属性起作用了。再来看一段实例代码:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:200px; height:200px; border:1px solid red; vertical-align:bottom;}.children{ width:60px; height:60px; background-color:#690;}</style></head><body><div class="parent"> <div class="children"></div></div></body></html>以上代码的表现可以看出，这里的vertical-align属性并没有起作用。这是因为此属性只能应用于具有valign属性的元素，table元素具有valign属性，而div元素不具有，所以第二个例子中，vertical-align属性不会起作用。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/587.html
立即学习“前端免费学习笔记（深入）”；
最为原始地址是:http://www.softwhy.com
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
445
