Heim >Web-Frontend >HTML-Tutorial >为什么设置的vertical-align垂直居中不起作用_html/css_WEB-ITnose
为什么设置的vertical-align垂直居中不起作用_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:011562Durchsuche
为什么设置的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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS访问Webservice的安全性问题_html/css_WEB-ITnoseNächster Artikel：CSS3 伸缩布局盒模型记_html/css_WEB-ITnose