前端设计问题:iframe

居中问题:

尝试了一般的居中方法,无效果

   			display: flex;justify-content: center;align-items: center;

放到导航栏下面不居中在这里插入图片描述

放到页面底部还是不居中在这里插入图片描述

Code

    <iframe id="demo_sanshui" src="demo_sanshui.html" width="120%" height="100%" scrolling="no" frameborder="0"></iframe>

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./css/daoshi1.css" /><!-- 继承(相对定位) --><script>window.parent.$(function() { // 使用 vindow.parent 调用父级 jqueryvar head = document.getElementsByTagName("head").item(0);var linkList = window.parent.document.getElementsByTagName("link"); // 获取父窗口 link 标签对象列表for (var i = 0; i < linkList.length; i++) {var _link = document.createElement("link");_link.rel = 'stylesheet';_link.type = 'text/css';_link.href = linkList[i].href;head.appendChild(_link);}});</script>
</head><body><div class="column_wrapper" id="" data-spm=""><div class="nav2_ind04" id=""><div class="textTab" id="nav02" data-spm="EuhLU9mTLz1p" data-spm-max-idx="2"><div class="left"><h3><a href="#" target="_blank" data-spm-anchor-id="C28340.PdNvWY0LYxCP.EuhLU9mTLz1p.1">精彩呈现</a></h3></div><div class="clear"></div></div><div class="content" id="zbds_top" data-spm="EuhLU9mTLz1p"><div class="con"><ul style="margin-left: 0px"><li><div class="li_con"><div class="img"><a href="table.html" target="_blank"><img h5-src="" src="./images/san.png" /><i>山水</i></a></div><div class="title" id="time0"><a href="" target="_blank">#三板片区综合服务站 02-23</a></div><div class="brief" id="title_0"><a title="三板村“攻略”" href="https://www.jianpian.cn/a/cb4vwu5?sc=groupmessage&s_uid=2937179&a_uid=2937179&sd=1" target="_blank">三板村“攻略”</a></div></div><span class="li_line"></span></li><li><div class="li_con"><div class="img"><a href="#" target="_blank"><img h5-src="" src="./images/Flamingo.png" /><i>鸟兽</i></a></div><div class="title" id="time1"><ahref="https://mp.weixin.qq.com/s/2Z3NfYj3eszgSWagNTsCLw"target="_blank">#方志广东 2021-06-04</a></div><div class="brief" id="title_1"><atitle="新闻调查"href="https://mp.weixin.qq.com/s/2Z3NfYj3eszgSWagNTsCLw"target="_blank">千鸟翔集的岭南水乡</a></div></div><span class="li_line"></span></li><li><div class="li_con"><div class="img"><a href="" target="_blank"><img h5-src="" src="./images/政策解读.png" /><i>政策</i></a></div><div class="title" id="time2"><ahref="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">#南方日报 2020-11-19</a></div><div class="brief" id="title_2"><atitle="古村焕新记"href="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">古村焕新记</a></div></div><span class="li_line"></span></li><li><div class="li_con"><div class="img"><a href="#" target="_blank"><imgh5-src="./images/皮划艇.png"src="./images/皮划艇.png"/><i>人文</i></a></div><div class="title" id="time3"><ahref="https://www.sohu.com/a/722923449_121106875"target="_blank">#珠海金湾 2023-09-23</a></div><div class="brief" id="title_3"><atitle="开门大吉-2023-43"href="https://www.sohu.com/a/722923449_121106875"target="_blank">丰收盛会水乡欢腾</a></div></div><span class="li_line"></span></li><!-- 新增一个主题,但无法显示(失败) --><!-- <li><div class="li_con"><div class="img"><a href="" target="_blank"><img h5-src="" src="./images/政策解读.png" /><i>改变</i></a></div><div class="title" id="time4"><ahref="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">#南方日报 2020-11-19</a></div><div class="brief" id="title_4"><atitle="古村焕新记"href="http://dara.gd.gov.cn/snnyxxlb/content/post_3130231.html"target="_blank">古村焕新记</a></div></div><span class="li_line"></span></li> --></ul></div></div></div></div><script>window.parent.$(function () {  // 使用 vindow.parent 调用父级 jqueryvar body = document.getElementsByTagName("body").item(0);var scriptList = window.parent.document.getElementsByTagName("script");  // 获取父窗口 script 标签对象列表for (var i =0 ; i < scriptList.length; i++) {var _script = document.createElement("script");_script.type = 'text/script';_script.src = scriptList[i].src;body.appendChild(_script);}});</script></body>
</html>

CSS

* {-webkit-text-size-adjust: none;text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}body,
div,
p,
ul,
ol,
dl,
dt,
dd,
li,
form,
input,
table,
img,
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0;padding: 0;
}body {color: #222222;background: #fff;margin-top: 0;font-family: PingFangSC-Regular, Helvetica, Arial, Microsoft Yahei, sans-serif;margin: 0 auto;min-width: 1022px;background-repeat: no-repeat;background-position: center center;
}a {color: #222222;text-decoration: none;/*outline: none;*/
}ul,
ol {list-style-type: none;
}em,
b,
i {font-style: normal;
}ul:after,
ol:after {clear: both;content: ".";display: block;font-size: 0;height: 0;line-height: 0;visibility: hidden;
}.clear {height: 0px;line-height: 0;font-size: 0;overflow: hidden;clear: both;
}/*默认分辨率小于1279 ,内容宽度962*/.column_wrapper {width: 1500px;margin: 0 auto;clear: both;position: relative;
}/*标题栏*/.textTab {clear: both;padding-bottom: 10px;
}/* 直播导视 */.nav2_ind04 .content {border-top: 2px solid #e5e5e5;padding: 0px 28px;position: relative;
}.nav2_ind04 .content .con ul li {padding: 28px 0px 26px 0;float: left;position: relative;
}.nav2_ind04 .content .con {position: relative;z-index: 1;overflow: hidden;
}.nav2_ind04 .content .con ul {width: 99999px;
}.nav2_ind04 .content .con ul li .img i {font-size: 18px;color: #000000;line-height: 21px;font-weight: bold;margin-left: 10px;
}.nav2_ind04 .content .con ul li .img a {width: 100%;display: block;line-height: 21px;
}.nav2_ind04 .content .con ul li .title {font-size: 14px;line-height: 24px;margin: 5px auto 10px 0px;color: #222222;
}.nav2_ind04 .content .con ul li .title a {color: #222222;
}.nav2_ind04 .content .con ul li .brief {font-size: 14px;line-height: 24px;color: #222222;height: 42px;
}.nav2_ind04 .content .con ul li .li_line {background: #0084ff;width: 186px;height: 2px;position: absolute;bottom: 0;left: 20px;display: none;
}.nav2_ind04 .content .con ul li .brief a {color: #222222;display: block;width: 100%;height: 100%;line-height: 24px;
}.nav2_ind04 .content .con ul li .li_con {border-right: 1px solid #e7e7e7;padding: 8px 20px 0px 20px;height: 104px;width: 186px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/167153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[HCIE] IPSec-VPN (IKE自动模式)

概念&#xff1a; IKE&#xff1a;因特网密钥交换 实验目标&#xff1a;pc1与pc2互通 步骤1&#xff1a;R1与R3配置默认路由 R1&#xff1a; ip route-static 0.0.0.0 0.0.0.0 12.1.1.2 R2&#xff1a; ip route-static 0.0.0.0 0.0.0.0 23.1.1.2 步骤2&#xff1a;配ACL…

工业级5G路由器:稳定性更高,网络速度更快!

随着5G技术的发展&#xff0c;5G路由器也越来越受到人们的关注。特别是工业级5G路由器&#xff0c;它的应用范围更广&#xff0c;稳定性更高&#xff0c;网络速度更快&#xff0c;已成为许多企业和工业领域的必备选择。 一、工业级5G路由器的特点 工业级5G路由器具有很多独特的…

利用MATLAB进行矩阵运算

一、画出y1/(x3)的函数曲线&#xff0c;x∈[0, 200]。 程序&#xff1a; x0:0.01:200; y(3x).^(-1); plot(x,y) 结果&#xff1a; 二、生成一个信号&#xff1a;xsin(2*pi*t)cos(4*pi*t) 程序&#xff1a; syms t; xsin(2*pi*t).*cos(4*pi*t); fplot(x,[0 pi]); 结果&…

electerm 跨平台的终端 /ssh/sftp 客户端

文章目录 electerm功能特性主题配色 electerm 每个程序员基本都离开SSH链接工具,目前市场上好用的基本都是收费的 给大家推荐一款国人开发的开源链接工具https://github.com/electerm/electerm 到目前为止star已经9.5K了,非常受欢迎 功能特性 支持ssh,telnet,serialport,本地和…

3ds Max 电脑配置建议 | 建模+渲染选专业显卡or游戏显卡?

&#xfeff;使用3ds Max进行建模和渲染时&#xff0c;选择合适的电脑配置非常重要。比如在硬件选择上&#xff0c;究竟选购游戏显卡还是专业显卡呢&#xff1f;本文将为你详细介绍游戏显卡和专业显卡的区别&#xff0c;并提供配置建议&#xff0c;助你作出明智的决策。 &#…

手把手用GPT开发小程序全流程!就是这么easy~

大家好&#xff0c;我是五竹。 前段时间用GPT开发了一款小程序:GPT真牛批&#xff01;三天开发一个小程序&#xff0c;三天积累了2000的用户&#xff0c;上周末抽空又接入了流量主&#xff0c;感兴趣的同学可以围观一下。 今天就来带大家走一遍用GPT开发一款小程序的全过程&a…

为什么选择美国VPS服务器

企业、个人和组织都需要一个稳定高效的服务器来托管他们的网站、应用程序和数据。而对于中国用户来说&#xff0c;寻找一个性价比高的便宜美国VPS服务器&#xff0c;既能满足需求&#xff0c;又能节约成本&#xff0c;成为了一个非常重要的问题。 VPS即虚拟专用服务器&#xf…

C++算法 —— 贪心(3)

文章目录 1、买卖股票的最佳时机2、买卖股票的最佳时机Ⅱ3、K次取反后最大化的数组和4、按身高排序5、优势洗牌6、最长回文串7、增减字符串匹配 1、买卖股票的最佳时机 121. 买卖股票的最佳时机 这里最容易想到的就是暴力枚举&#xff0c;两层for循环&#xff0c;i 0&#xf…

TFA-Net

TFA SCA means ‘Self-Context Aggregation’ 作者未提供代码

一文讲明Mybatis 的使用 超详细 【爆肝两万字教程】

我 | 在这里 &#x1f575;️ 读书 | 长沙 ⭐软件工程 ⭐ 本科 &#x1f3e0; 工作 | 广州 ⭐ Java 全栈开发&#xff08;软件工程师&#xff09; &#x1f383; 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲 &#x1f3f7;️ 标签 | 男 自律狂人 目标明确 责任心强 ✈️公…

羊大师教你,什么搭配羊奶能够带来全方位的营养?

羊奶作为一种营养价值极高的乳制品&#xff0c;其丰富的营养成分对人体健康有着诸多益处。然而&#xff0c;不同的食物搭配会对羊奶的营养吸收产生不同的影响。为了让大家更好地利用羊奶的营养价值&#xff0c;下面小编羊大师将为大家介绍一些与羊奶搭配的食物&#xff0c;帮助…

软件测试职业规划导图

公司开发的产品专业性较强&#xff0c;软件测试人员需要有很强的专业知识&#xff0c;现在软件测试人员发展出现了一种测试管理者不愿意看到的景象&#xff1a; 1、开发技术较强的软件测试人员转向了软件开发(非测试工具开发)&#xff1b; 2、业务能力较强的测试人员转向了软件…

【EI会议征稿】第三届电子信息技术国际学术会议(EIT 2024)

The 3rd International Conference on Electronic Information Technology 第三届电子信息技术国际学术会议&#xff08;EIT 2024&#xff09; 电子信息工程在我国信息化产业的发展过程中举足轻重&#xff0c;且随着现代社会的发展&#xff0c;航空航天领域、制造业领域和智能…

每日一题:LeetCode-102.二叉树的层序遍历

每日一题系列&#xff08;day 03&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…

NX二次开发UF_CSYS_set_wcs 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CSYS_set_wcs Defined in: uf_csys.h int UF_CSYS_set_wcs(tag_t csys_id ) overview 概述 Sets the work coordinate system to the prototype coordinate system whose tag y…

基于低代码平台搭建应用程序

目录 一、背景 二、如何基于低代码开发应用&#xff1f; 1.创建数据表 2.添加数据表属性 3.配置功能 4.数据筛选 5.数据集显示&功能发布 三、写在最后 一、背景 很多时候&#xff0c;市场上的管理软件鱼龙混杂&#xff0c;找一些外包团队在实际应用中效果并不理想&#xff…

开源还是闭源(=°Д°=)!!趋势表明,开源技术在诸多领域中日益受到重视

开源和闭源&#xff0c;两种截然不同的开发模式&#xff0c;对于大模型的发展有着重要影响。开源让技术共享&#xff0c;吸引了众多人才加入&#xff0c;推动了大模的创新。而闭源则保护了商业利益和技术优势&#xff0c;为大模型的商业应用提供了更好的保障。 一、开源和闭源的…

通过ros系统中websocket中发送sensor_msgs::Image数据给web端显示(三)

通过ros系统中websocket中发送sensor_msgs::Image数据给web端显示(三) 不使用base64编码方式传递 #include <ros/ros.h> #include <signal.h> #include <sensor_msgs/Image.h> #include <message_filters/subscriber.h> #include <message_filter…

【正点原子STM32连载】第五十九章 T9拼音输入法实验(Julia分形)实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32F407最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html## 第五十…