深圳网站建设公司盛世华彩松岗做网站联系电话
属性名： vertical - align 。
作用：用于指定 同一行元素之间 ，或 表格单元格 内文字的 垂直对齐方式 。
常用值：
1. baseline （默认值）：使元素的基线与父元素的基线对齐。
2. top ：使元素的 顶部 与其 所在行的顶部 对齐。
3. middle ：使元素的 中部 与 父元素的基线 加上父元素 字母 x 的一半 对齐。
4. bottom ：使元素的 底部 与其 所在行的底部 对齐。
特别注意： vertical - align 不能控制块元素。
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vertical-align</title><style>.wc1 {font-size: 100px;height: 300px;background-color: skyblue;}span{font-size: 40px;background-color: orange;/* middle是元素的中部与父元素的基线加上父元素字母x的一半对齐 */vertical-align: middle;}</style>
</head><body><div><p class="wc1">雨滴敲打着X<span>X窗户</span></div>
</body></html> middle ：使元素的 中部 与 父元素的基线 加上父元素 字母 x 的一半 对齐。
baseline （默认值）：使元素的基线与父元素的基线对齐。
2. top ：使元素的顶部与其所在行的顶部对齐。
bottom ：使元素的底部与其所在行的底部对齐。
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vertical-align2</title><style>div {font-size: 100px;height: 300px;background-color: skyblue;}img {height: 30px;vertical-align: top;}</style>
</head>
<body><div><p class="it1">拍打着沙滩 <img src="../imags/1.jpg" alt=""></p></div>
</body>
</html>
