居中布局
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试样例</title> <style> .outer { width: 400px; height: 400px; background-color: gray; text-align: center; line-height: 400px; font-size: 0px; /* vertical-align: middle; */ } img { vertical-align:middle; } span{ vertical-align: middle; font-size: 40px; background-color: antiquewhite; } </style> </head> <body> <div class="outer"> <span>出来玩呀?</span> <img src="../images/悟空.jpg"> </div> </body> </html>