鱼C论坛

 找回密码
 立即注册
查看: 2170|回复: 2

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

[复制链接]
发表于 2018-8-24 23:30:33 | 显示全部楼层 |阅读模式

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

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

x
源代码如下
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=utf-8" />

  5. <title>404-对不起!您访问的页面不存在</title>

  6. <style type="text/css">

  7. .head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/head404.png) no-repeat; }

  8. .txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(https://www.daixiaorui.com/Public/images/txtbg404.png) no-repeat;}

  9. .txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}

  10. .txtbg404 .txtbox p {margin:5px 0; line-height:18px;}

  11. .txtbg404 .txtbox .paddingbox { padding-top:15px;}

  12. .txtbg404 .txtbox p a { color:#eee; text-decoration:none;}

  13. .txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}

  14. </style>

  15. </head>



  16. <body bgcolor="#494949">

  17.            <div class="head404"></div>

  18.            <div class="txtbg404">

  19.   <div class="txtbox">

  20.       <p>对不起,您请求的页面不存在、或已被删除、或暂时不可用</p>

  21.       <p class="paddingbox">请点击以下链接继续浏览网页</p>

  22.       <p>》<a style="cursor:pointer" onclick="history.back()">返回上一页面</a></p>

  23.       <p>》<a href="https://www.daixiaorui.com">返回网站首页</a></p>

  24.     </div>

  25.   </div>

  26. </body>

  27. </html>
  28. </html>
复制代码


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

如果实在麻烦,只要能把那个404图片和下面的内容一起在页面自动水平垂直都居中即可,背景就是那个灰色的。感谢感谢
最佳答案
2018-8-25 09:10:11
本帖最后由 不二如是 于 2018-8-25 09:34 编辑

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

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


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

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


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

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

源码(VIP免费): index.zip (989 Bytes, 下载次数: 2, 售价: 2 鱼币)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-25 09:10:11 | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2018-8-25 09:34 编辑

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

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


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

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


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

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

源码(VIP免费): index.zip (989 Bytes, 下载次数: 2, 售价: 2 鱼币)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

谢谢啊,但是你修改的这个,下面的文字部分没有在那个浅灰色的背景里,看着就不好看了。
我是自己不会弄,所以找到的是绝对长度的,大佬你有没有办法,就是利用这两个图片和里面的文字做成一个自适应的?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 07:59

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表