Home > Article > Web Front-end > Why the set vertical-align vertical centering does not work_html/css_WEB-ITnose
Why the set vertical-align vertical centering does not work_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:011556browse
Why the set vertical-align vertical centering does not work:
The vertical-align attribute may not be used too frequently, but sometimes it may be used vertical-align:middle sets the vertical center alignment of elements within the object, but sometimes you find that this setting does not always have an effect. The code example is as follows:
<!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> From the performance of the above code, we can see that the vertical-align attribute works. Let’s look at a piece of example code:
<!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> It can be seen from the performance of the above code that the vertical-align attribute here does not work. This is because this attribute can only be applied to elements with the valign attribute. The table element has the valign attribute, but the div element does not, so in the second example, the vertical-align attribute will not work.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0503/587.html
The most original address is: http://www.softwhy.com