为什么设置的vertical-align垂直居中不起作用_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:41:011534검색
为什么设置的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
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.