98 lines
2.8 KiB
HTML
98 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>10_vertical-align</title>
|
||
<style>
|
||
/**
|
||
这些值使元素相对其父元素垂直对齐：
|
||
|
||
baseline
|
||
使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分可替换元素的基线，如<textarea> ，这意味着这些元素使用此值的表现因浏览器而异。
|
||
|
||
sub
|
||
使元素的基线与父元素的下标基线对齐。
|
||
|
||
super
|
||
使元素的基线与父元素的上标基线对齐。
|
||
|
||
text-top
|
||
使元素的顶部与父元素的字体顶部对齐。
|
||
|
||
text-bottom
|
||
使元素的底部与父元素的字体底部对齐。
|
||
|
||
middle
|
||
使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。
|
||
**/
|
||
div {
|
||
font-size: 100px;
|
||
background-color: skyblue;
|
||
height: 300px;
|
||
}
|
||
span {
|
||
font-size: 40px;
|
||
background-color: orange;
|
||
/* 使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐。 */
|
||
vertical-align: middle;
|
||
}
|
||
/* 一行的高度由 所有元素中最高决定 */
|
||
img {
|
||
height: 30px;
|
||
vertical-align: top;
|
||
}
|
||
/* 反例： vertical-align作用与元素，且为行内元素块级元素不生效 */
|
||
.test {
|
||
width: 400px;
|
||
height: 400px;
|
||
background-color: green;
|
||
vertical-align: bottom;
|
||
}
|
||
.test2 {
|
||
width: 400px;
|
||
height: 400px;
|
||
background-color: green;
|
||
vertical-align: bottom;
|
||
}
|
||
/* 无法用于div块级元素，但是可以用于单元格 */
|
||
.san {
|
||
vertical-align: top;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div>逝水无痕x <span>x前端</span></div>
|
||
<hr>
|
||
<div>逝水无痕x <img src="http://cdn.zyjblogs.cn/logo.jpg"></div>
|
||
<hr>
|
||
<div class="test">123</div>
|
||
<hr>
|
||
<div class="test">
|
||
<div class="test2">222</div>
|
||
</div>
|
||
|
||
<table border="1" cellspacing="0">
|
||
<caption>人员信息</caption>
|
||
<thead>
|
||
<tr>
|
||
<th>姓名</th>
|
||
<th>年龄</th>
|
||
<th>性别</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr height="200px">
|
||
<td class="san">张三</td>
|
||
<td>18</td>
|
||
<td>男</td>
|
||
</tr>
|
||
<tr>
|
||
<td>张三</td>
|
||
<td>20</td>
|
||
<td>男</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</body>
|
||
</html> |