布局 - vertical_align
2018-07-07 本文已影响0人
Cicada丶
- vertical_align作用于多个连续的行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--vertical-align的默认值是base_line-->
<div style="background-color: black;width: 300px;height: 300px;">
<font style="background-color: red;">A</font>
<font style="background-color: green;">B</font>
<div style="background-color: red;width: 100px;height: 100px;display: inline-block;"></div>
<div style="background-color: blue;width: 100px;height: 100px;display: inline-block;"></div>
</div>
<!--对设置了vertical-align的连续行内元素们按设置的对齐方式对齐-->
<div style="background-color: black;width: 300px;height: 300px;">
<font style="background-color: green;vertical-align: top;font-size: 50px">A</font>
<font style="background-color: red;vertical-align: middle;font-size: 20px">B</font>
<!--C没有居中，而是base_line-->
<font style="background-color: green;font-size: 40px">C</font>
<div style="background-color: red;width: 100px;height: 100px;display: inline-block;vertical-align: middle;"></div>
<div style="background-color: blue;width: 100px;height: 100px;display: inline-block;vertical-align: middle;"></div>
</div>
</body>
</html>
