您所在的位置:小祥子 » 编程 » CSS » 正文

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

时间:2015-07-16 编辑:一落叶而知秋 来源:CnBlogs

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

关键词:设置 li 垂直 居中