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>
