搜索
首页web前端js教程利用jq让你的div居中的好方法分享_jquery

very short version:

复制代码 代码如下:

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

short version:

复制代码 代码如下:

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    });
})(jQuery);

Activated by this code :
$('#mainDiv').center();
 

PLUGIN VERSION

复制代码 代码如下:

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

Activated by this code :

复制代码 代码如下:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
WPS表格居中怎么设置WPS表格居中怎么设置Mar 19, 2024 pm 09:34 PM

随着WPS的功能越来越强大,我们遇到的关于功能使用的问题也越来越多。在WPS中,我们经常会使用到WPS表格,如果我们需要打印WPS表格,为了让表格看起来美观,这时候我们需要让表格居中。那么,问题来了,我们该如何让WPS表格居中呢?今天我在这里分享一下教程,希望能够帮到你们哦!步骤详情:1、我以实战操作来讲解,以下是我用WPS表格制作了一个简单的表格。2、通过打印预览,我们可以发现,WPS表格默认是居左的。如果我们要是想把表格居中的话该怎么办呢?3、这时候,我们需要点击【工具栏】中的【页面布局】的

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与span的区别有哪些div与span的区别有哪些Nov 02, 2023 pm 02:29 PM

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

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

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

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

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

如何将一个div居中在另一个div中?如何将一个div居中在另一个div中?Sep 08, 2023 am 11:13 AM

简介div的居中对齐是前端开发最重要的方面之一。在本文中,我们将了解使用HTML和CSS将一个div置于另一个div中的技术。在本教程中,我们将有一个父div,它应具有子div。我们的任务是将子div放置在父div的中心。使用Transform翻译和位置语法这不是一种非常流行的将一个div居中对齐到另一个div中的方法语法left:50%;top:50%;Transform:translate(-50%,-50%);上面的语法执行以下操作-CSS规则“left:50%;”将元素的水平位置设置为其

操作方法:如何调整Win11任务栏图标大小且居中显示操作方法:如何调整Win11任务栏图标大小且居中显示Jan 03, 2024 am 08:17 AM

win11带来了全新的界面包括任务栏也进行了改变,但是呢很多的用户使用的时候都感觉任务栏的图标太大了不习惯,为此下面就给大家带来了win11居中任务栏图标变小操作方法,快来一起学习一下吧。win11居中任务栏图标怎么变小:1、说先用户用户要打开进入注册表编辑器。2、然后依次展开:HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\。3、然后在右边新建一个“TaskbarSi”的DWORD值,将

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无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

DVWA

DVWA

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

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具