利用vertical-align:middle实现在整个页面居中

最新推荐文章于 2025-07-22 00:16:16 发布

dwj200810

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

本文链接：https://blog.youkuaiyun.com/dwj200810/article/details/84445276

本文详细介绍了如何设计和实现一个美观且交互友好的404错误页面，包括使用HTML、CSS和JavaScript来创建一个视觉吸引人的界面，并通过图片和链接引导用户返回主页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
     <title>404页面</title> 
 </head> 
 <body> 
     <div class="wall"> 
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a> 
     </div> 
 </body> 
 </html> 

<style type="text/css"> 
         body{ margin:0; background:#333; _height:100%;}  
         .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}  
         .img404{ border:0;width:700px;}  
 </style> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
      <title>404页面</title> 
      <style type="text/css"> 
          body{ margin:0; background:#333; _height:100%;}  
          .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}  
          .img404{ border:0; width:700px; vertical-align:middle;}  
          .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}  
  </style> 
  </head> 
  <body> 
      <div class="wall"> 
         <span class="verticalAlign"></span> 
         <a href="index.html"><img class="img404" src="images/404.jpg" alt="404页面" /></a> 
      </div> 
  </body> 
  </html>