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

求大佬改一段代码,将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:10:11

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

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

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


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

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


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

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

源码(VIP免费):

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

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

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

谢谢啊,但是你修改的这个,下面的文字部分没有在那个浅灰色的背景里,看着就不好看了。
我是自己不会弄,所以找到的是绝对长度的,大佬你有没有办法,就是利用这两个图片和里面的文字做成一个自适应的?
页: [1]
查看完整版本: 求大佬改一段代码,将css图片垂直水平都居中