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

| 阅读数:--次| 作者:html,css
摘要:为什么设置的vertical-align垂直居中不起作用:vertical-align属性可能使用并不是太频繁,但是有时候可能会使用vertical-align:middle设置对象内部的元素垂直居中对齐,但是有时候会发现此设置并非都会产生效果。代码实例如下:蚂蚁部落 从以上代码的表现...

为什么设置的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.softwhy.com

返回顶部
学到老代码浏览 关闭浏览