首頁 > 開發者 > JavaScript
為什麼設定的vertical-align垂直置中不起作用，textalign垂直置中
為什麼設定的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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
