搜索
首页web前端css教程DIV 居中的绝好解决方法_经验交流

现在进行WEB重构的时候,一般我们做DIV 居中是这样: 

复制代码 代码如下:

body{
margin:0px auto;
text-align:center;
}

但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐!
复制代码 代码如下:

html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗? 可是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.
直到昨天,一个想法在我脑中闪了一下. 何不用JS来控制页面的边距?说干就干!
找了个页面.添加了下面的一小段代码. 
复制代码 代码如下:

<script></script>

function.js内容: 
复制代码 代码如下:

if(window.screen.width>800){document.write("");}

保存,测试. 哈哈,换了几个分辨率都可以正常居中!至此试验成功.
总结一下:
主要是这句代码起的作用: 
复制代码 代码如下:

(window.screen.width-800)/2 //计算页面应该留出的边距数值.800为我的DIV宽度 + 滚动条宽度.实际应用改为你自己的大小. 

补充一点:上面这段JS 必须放在你的最后一个CSS连接或的后面.
欢迎大家到我的小站交流更好的实现方法! 
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
css怎么实现div缺一个角css怎么实现div缺一个角Jan 30, 2023 am 09:23 AM

css实现div缺一个角的方法:1、创建一个HTML示例文件,并定义一个div;2、给div设置宽高背景色;3、给需要删除一角的div增加一个伪类,将伪类设置成跟背景色一样的颜色,然后旋转45度,再定位到需要去除的那个角即可。

基于 ChatGPT API 的划词翻译浏览器脚本实现基于 ChatGPT API 的划词翻译浏览器脚本实现May 01, 2023 pm 03:28 PM

前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本,openai-translator,短时间内star冲到了12k,功能上除了支持翻译外,还支持润色和总结功能,除了浏览器插件外,还使用了tauri打包了一个桌面客户端,那抛开tauri是使用rust部分,那浏览器部分实现还是比较简单的,今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码,在浏览器控制台中发起请求,就可以完成翻译//示例constOPENAI_API_KEY="s

div盒模型是什么div盒模型是什么Oct 09, 2023 pm 05:15 PM

div盒模型是一种用于网页布局的模型,它将网页中的元素视为一个个矩形的盒子,这个模型包含了四个部分:内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距,通过调整内容区域、内边距、边框和外边距的大小,可以实现各种不同的布局效果,盒模型也提供了一些属性和方法,可以通过CSS和JavaScript来动态地改变盒子的样式和行为。

div与span的区别有哪些div与span的区别有哪些Nov 02, 2023 pm 02:29 PM

区别有:1、div是一个块级元素,span是一个行内元素;2、div会自动占据一行,span则不会自动换行;3、div用于包裹比较大的结构和布局,span用于包裹文本或者其他行内元素;4、div可以包含其他块级元素和行内元素,span可以包含其他行内元素。

iframe和div有什么不同iframe和div有什么不同Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用于引入外部内容,可以加载其他网站的内容或将一个网页分割成多个区域,每个区域有自己的独立的浏览上下文,而div主要用于分割和组织内容的区块,用于布局和样式控制。

如何将两个div并排显示如何将两个div并排显示Nov 01, 2023 am 11:36 AM

方法有:1、将两个div元素设置为“float:left;”属性;2、使用CSS的flex布局可以轻松实现元素的并排显示;3、使用CSS的grid布局也可以实现元素的并排显示。

jQuery技巧:掌握在div中添加标签的方法jQuery技巧:掌握在div中添加标签的方法Feb 23, 2024 pm 01:51 PM

标题:jQuery技巧:掌握在div中添加标签的方法在网页开发中,经常会遇到需要动态添加标签到页面中的情况。使用jQuery可以方便地操作DOM元素,实现快速的标签添加功能。本文将介绍如何使用jQuery在div中添加标签的方法,并附上具体的代码示例。1.准备工作在使用jQuery之前,需要在页面中引入jQuery库,可以通过CDN链接引入,也可以下载到本

react怎么实现显示隐藏divreact怎么实现显示隐藏divJan 18, 2023 pm 01:58 PM

react实现显示隐藏div的方法:1、在函数式组件内容中通过“{showoverlay? (<div></div>):null}”实现div的显示隐藏;2、在业务逻辑中判断visible的取值,并通过在组件样式中设置“style={{ display: `${visible ? '' : 'none'}` }}”即可。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具