[已解决]求大佬改一段代码，将css图片垂直水平都居中

如默 · 发表于 2018-8-24 23:30:33

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

源代码如下

<!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>
 
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>404-对不起！您访问的页面不存在</title>
 
<style type="text/css">
 
.head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/head404.png) no-repeat; }
 
.txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/txtbg404.png) no-repeat;}
 
.txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}
 
.txtbg404 .txtbox p {margin:5px 0; line-height:18px;}
 
.txtbg404 .txtbox .paddingbox { padding-top:15px;}
 
.txtbg404 .txtbox p a { color:#eee; text-decoration:none;}
 
.txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}
 
</style>
 
</head>
 
 
 
<body bgcolor="#494949">
 
           <div class="head404"></div>
 
           <div class="txtbg404">
 
  <div class="txtbox">
 
      <p>对不起，您请求的页面不存在、或已被删除、或暂时不可用</p>
 
      <p class="paddingbox">请点击以下链接继续浏览网页</p>
 
      <p>》<a style="cursor:pointer" onclick="history.back()">返回上一页面</a></p>
 
      <p>》<a href="https://www.daixiaorui.com">返回网站首页</a></p>
 
    </div>
 
  </div>
 
</body>
 
</html>
</html>

想让这个404的页面两部分div的内容自动水平垂直居中，达到类似于响应式页面那种效果。因为手机版和电脑版都是这个页面。自己不会改。

如果实在麻烦，只要能把那个404图片和下面的内容一起在页面自动水平垂直都居中即可，背景就是那个灰色的。感谢感谢

最佳答案

月排行榜 / 总排行榜

不二如是

2018-8-25 09:10:11

本帖最后由不二如是于 2018-8-25 09:34 编辑

1、关于垂直居中的更多玩法请看：实用Tips - 28 - 私家藏货之@垂直居中 | 【嘘...】

2、目前你的页面只有水平居中：

3、垂直居中设置好了，多端同样是垂直居中，自适应部分是页面布局的问题，两个问题。

4、按照你需要的修改为垂直居中：

添加一个div包裹你的标签，然后添加一个隐藏标签，用来撑布局

硬伤：由于你自身设定的都是绝对长度，xxxpx，这样很难做自适应哦。

源码（VIP免费）：

index.zip (989 Bytes, 下载次数: 2, 售价: 2 鱼币)

跳转到最佳答案楼层

不二如是 · 发表于 2018-8-25 09:10:11

本帖最后由不二如是于 2018-8-25 09:34 编辑

1、关于垂直居中的更多玩法请看：实用Tips - 28 - 私家藏货之@垂直居中 | 【嘘...】

2、目前你的页面只有水平居中：

3、垂直居中设置好了，多端同样是垂直居中，自适应部分是页面布局的问题，两个问题。

4、按照你需要的修改为垂直居中：

添加一个div包裹你的标签，然后添加一个隐藏标签，用来撑布局

硬伤：由于你自身设定的都是绝对长度，xxxpx，这样很难做自适应哦。

源码（VIP免费）：

index.zip (989 Bytes, 下载次数: 2, 售价: 2 鱼币)

如默 · 发表于 2018-8-25 15:02:24

不二如是发表于 2018-8-25 09:10
1、关于垂直居中的更多玩法请看：实用Tips - 28 - 私家藏货之@垂直居中 | 【嘘...】

2、目前你的页面只 ...

谢谢啊，但是你修改的这个，下面的文字部分没有在那个浅灰色的背景里，看着就不好看了。
我是自己不会弄，所以找到的是绝对长度的，大佬你有没有办法，就是利用这两个图片和里面的文字做成一个自适应的？

账号		自动登录	找回密码
密码			立即注册