Heim > Web-Frontend > HTML-Tutorial > 为什么设置的vertical-align垂直居中不起作用_html/css_WEB-ITnose

为什么设置的vertical-align垂直居中不起作用_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:01
Original
1567 Leute haben es durchsucht

为什么设置的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>
Nach dem Login kopieren

从以上代码的表现可以看出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>
Nach dem Login kopieren

以上代码的表现可以看出,这里的vertical-align属性并没有起作用。这是因为此属性只能应用于具有valign属性的元素,table元素具有valign属性,而div元素不具有,所以第二个例子中,vertical-align属性不会起作用。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/587.html

最为原始地址是:http://www.softwhy.com

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage