求大佬改一段代码,将css图片垂直水平都居中
源代码如下<!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:34 编辑
1、关于垂直居中的更多玩法请看:实用Tips - 28 - 私家藏货之@垂直居中 | 【嘘...】
2、目前你的页面只有水平居中:
3、垂直居中设置好了,多端同样是垂直居中,自适应部分是页面布局的问题,两个问题。
4、按照你需要的修改为垂直居中:
添加一个div包裹你的标签,然后添加一个隐藏标签,用来撑布局
硬伤:由于你自身设定的都是绝对长度,xxxpx,这样很难做自适应哦。
源码(VIP免费): 不二如是 发表于 2018-8-25 09:10
1、关于垂直居中的更多玩法请看:实用Tips - 28 - 私家藏货之@垂直居中 | 【嘘...】
2、目前你的页面只 ...
谢谢啊,但是你修改的这个,下面的文字部分没有在那个浅灰色的背景里,看着就不好看了。
我是自己不会弄,所以找到的是绝对长度的,大佬你有没有办法,就是利用这两个图片和里面的文字做成一个自适应的?
页:
[1]