1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>图片对齐</title>
 8     <style>
 9         .one {
10             width: 150px;
11             height: 150px;
12             background-color: red;
13             margin: 100px auto;
14             text-align: center;
15             /* 对块级元素无效 */
16             /* vertical-align: middle; */
17         }
18         
19         .two img {
20             vertical-align: middle;
21         }
22         
23         .two span {
24             vertical-align: middle;
25             /* 运用于行内元素 */
26         }
27     </style>
28 </head>
29 
30 <body>
31 
32     <div class="one">我是一只猫</div>
33     <hr />
34     <div class="two">
35         <img src="images/1.jpg" alt="" width="200px" height="200px" />
36         <span>你会失眠吗?</span>
37 
38     </div>
39 </body>
40 
41 </html>