返回
更多资讯
分类

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

日期: 2020-01-06 14:20 浏览次数 : 162

为什么设置的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属性不会起作用。

原文地址是:

最为原始地址是:

为什么设置的vertical-align垂直居中不起作用: vertical-align属性可能使用并不是太...