使浮动DIV始终居中

最新推荐文章于 2022-05-19 18:36:14 发布
最新推荐文章于 2022-05-19 18:36:14 发布
阅读量7.8k 收藏 2
点赞数
分类专栏： JS&HTML&CSS 文章标签： div

 

  1. <html>  
  2.     <head>  
  3.     <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">  
  4.     <title>  *  emu  *  </title>  
  5.     <SCRIPT>  
  6.     <!--  
  7.         window.onresize  =  resetDIV;  
  8.         function  resetDIV()  
  9.         {  
  10.             with(document.getElementsByTagName("DIV")[0].style)  
  11.             {  
  12.                 left  =  (document.body.offsetWidth-parseInt(width))/2  
  13.                 top  =  (document.body.offsetHeight-parseInt(height))/2  
  14.              }  
  15.         }  
  16.     //-->  
  17.     </SCRIPT>  
  18.     </head>  
  19.     <body  onload="resetDIV()">  
  20.         <div  style="position:absolute;width=200;height=200;background-color=yellow"></div>  
  21.     </body>  
  22. </html>  
sallay
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Div在设置了浮动的情况下水平居中
Yan 小铁匠
08-21 1623
自己布局的时候发现在设置了div为浮动后再去添加margin：auto属性是无效的； 测试一 首先简单布局一下，在body里面添加两个div，一个父div(div_box),一个子div (div1)，div1设置浮动并且设置margin：auto代码如下： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" ...
浮动的div自适应居中显示的js代码
12-09
接下来，我们需要计算出浮动`div`（假设其类名为`.rts`）距离左侧的适当距离，使其居中。这里使用了一个公式`var popWidth = (bW - 150) / 2;`，其中`150`是浮动`div`的宽度。这个公式计算了`div`与容器边缘之间的...
div浮动居中
qq_34307209的博客
09-05 728
使浮动的div居中样式 position: absolute;top:50%;left:50%;margin-left:-300px; margin-top:-150px； margin-left:-300px; 这个值是DIV宽度的一半， margin-top:-150px; 是DIV高度的一半。
浮动的div无论窗口大小变化都能居中显示的js
weixin_30848775的博客
12-23 151
当div是浮动的时候浏览器窗口发生变化的时候不能居中显示（因为浮动的时候一般设定的有left或者right值） 可以先用jquery获取外围的div随浏览器变化而变化的宽度（加上监听事件） 之后再获取div的宽度 例如： function autoWidth(){ var bW = $(".call_man").width();//外围的div var popWidth ...
悬浮居中的div
Df's blog
03-17 1656
element &lt;div class="float" id="float"&gt;加载中...&lt;/div&gt; css .float { font-size: 30px; position: fixed; top:50%; left: 50%; ...
关于div的浮动及居中问题
qq_43243579的博客
03-29 3638
一、如何设置div浮动 设置div的css样式float : left，成功浮动 DIV设置浮动float以后下一个DIV要换行的方法 在原有的样式上添加clear : both，使图像的左侧和右侧均不允许出现浮动； clear 属性定义了元素的哪边上不允许出现浮动元素。 二、如何设置div居中 1、盒子本身及内部的盒子都未浮动时：使用align=“center” <div align="c...
jQuery实现的浮动层div浏览器居中显示效果
10-20
主要介绍了jQuery实现的浮动层div浏览器居中显示效果,涉及jQuery及JS动态操作页面元素与属性相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
让几个横向排列的浮动子div居中显示的方法
09-25
这样，尽管子div是浮动的，但由于内层div（containerdiv）被外层div（outerdiv）居中，整个结构仍然可以实现居中对齐的效果。这是一个常见的解决浮动元素居中问题的方案，适用于那些需要保持浮动布局，同时又想实现...
DIV+CSS垂直居中一个浮动元素
09-25
假设我们有以下场景：在一个固定高度（例如300px）的`div`中，包含一个浮动的按钮元素（`button`），我们希望这个按钮能在其父容器中垂直居中。原始的HTML和CSS代码如下： ```html <!DOCTYPE html> <title></...
如何居中div？如何居中一个浮动元素？
泠泠似水
12-29 8631
给div设置一个宽度，然后设置元素的左右外边距为 auto，比如，margin:0px auto。则可以实现 div 居中显示。 对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，如果需要设置其居中显示，可以： 1、 精确计算其左外边距并进行设置，实现居中显示； 2、 使用一个居中显示的 div 元素包含此浮动元素，代码如：<div style="margin:0px au
使DIV相对窗口大小左右拖动始终水平居中
weixin_30632089的博客
08-17 99
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>使DIV相对窗口大小左右拖动始终水平居中</title> <met...
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
YouYi__的博客
09-14 695
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中? 给div设置一个宽度，然后设置元素的左右外边距为 auto，比如，margin:0px auto。则可以实现 div 居中显示。 对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，如果需要设置其居中显示，可以： 1、 精确计算其左外边距并进行设置，实现居中显示； 2、 使用一个居中显示的 div 元素包含此浮动元素， ...
如何让一个div居于页面正中间
qq_33235680的博客
11-04 3136
让div居于屏幕正中间的方法1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div居于页面正中间</title> <style type="text/css"> *{ margin: 0; padding: 0; bac
html始终让元素居中显示，背景图铺满随便拖动不出界
aoe41606的博客
07-08 130
首先。写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Content/Images/background.jpg); background-repeat: no-repeat; back...
让浮动元素居中的几种方法
weixin_42178670的博客
05-19 3930
让浮动元素居中的几种方法 方法一： 给浮动元素外层包裹一个div,这个div和浮动元素宽度一致，然后对这个div设置margin: 0 auto; -------html------- <div class="container-layout"> <div class="content clearfix"> <div class="float-item">float-item</div> </div> </di
如何居中一个元素（正常、绝对定位、浮动元素）?
qq_29715077的博客
04-28 2423
（一）元素水平居中的方式1）行级元素水平居中对齐（父元素设置 text-align:center）      [html] view plain copy&lt;div style="width: 200px; height: 100px;border: 1px solid;text-align:center;"&gt;        &lt;span&gt;行级元素垂直居中&lt;/span&g...
屏幕居中(DIV/CSS)
万里浮云的专栏
08-29 766
1.利用table特性，在width and height all set 100%的时候，可以把容器嵌套在td内形成绝对居中，此时的被嵌套容器可为绝对或者相对大小。（非标准）注意不能加声明！ 　　如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;}   2.利用负边距方法，绝对定位使容器相对
浮动元素居中的三种方法
热门推荐
weixin_59269336的博客
09-15 1万+
文章目录浮动元素居中的三种方法方法一方法二方法三总结 浮动元素居中的三种方法 方法一 知识点： 浮动 样式： .left{ floa: left; width: 100px; background-color: yellow; } .content{ width: 100px; margin: 0 auto; } <div class="content"> <div class="left">left</div> </div>
div float 居中
最新发布
09-02
要将一个 div 元素使用 float 属性居中，可以使用以下方法： 1. 设置左右 margin 为 auto，并且为该 div 添加一个固定的宽度。例如： ```css div { width: 200px; /* 设置宽度 */ margin-left: auto; /* 左右 margin 设置为 auto */ margin-right: auto; float: none; /* 取消浮动 */ } ``` 2. 使用 flexbox 布局。将父容器设置为 display: flex，并且使用 justify-content 属性设置水平居中。例如： ```css .container { display: flex; justify-content: center; /* 水平居中 */ } .container div { float: none; /* 取消浮动 */ } ``` 3. 使用 position 属性。将父容器设置为相对定位，然后将 div 设置为绝对定位，并通过 left 和 right 属性将其居中。例如： ```css .container { position: relative; /* 相对定位 */ } .container div { position: absolute; /* 绝对定位 */ left: 0; right: 0; margin: 0 auto; /* 水平居中 */ } ``` 这些方法中，第一种方法是最常用的。根据具体情况选择适合的方法进行布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值