设置div绝对定位+居中

  1):div的一般居中(注意:一定要设置div的width):

<div id="i_div" style="border: 1px solid red;margin: 0 auto; width:500px;">json9527</div>

  2):div的绝对定位居中(注意:一定要设置父标签的position为relative)

<div style="position: relative;">
  <div id="i_div" style="border: 1px solid red;position:absolute;top:30px;left:50%;width:500px;margin-left:-250px;">json9527</div>
</div>

  3):动态设置绝对定位居中(注意这里的margin-left变成了marginLeft)

<div style="position: relative;">
  <div id="i_div" style="border: 1px solid red;">json9527</div>
</div>

$("#i_div").css({position:"absolute",top:"30px",left:"50%",width:"500px",marginLeft:"-250px"});
时间: 2024-08-29 10:43:21

设置div绝对定位+居中的相关文章

设置div中的div居中显示

设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> style样式: .big{ height:200px; width:200px; border:black solid 1px; position:absolute; left:150px; } .small{ height:100px; width:100px; background-color:green

html中div的居中

背景:html中的div可以说是布局神器,但是有些时候没有那种一步到位的属性来定义某个div来居中.故需要手动写css来调试 代码(code): <style type="text/css"><!-- div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid #008800; }--></

CSS实现绝对定位居中

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为 绝对居中(Absolute Centering) ,虽然如此,但是大多数讨论

HTML5:footer定位(底部+居中)的探讨+div图片居中问题

初学HTML+CSS布局,尝试自己写一个百度首页,但是footer的定位遇到麻烦并且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指点一二,在此先谢过. 首先是设置为 footer{     clear: both;     display: block; position: absolute; bottom: 100px; } 时效果为:确实绝对定位到了底部,但是由于是绝对定位,使用 footer{     clear: bo

各种div+css居中方式调整(转载)

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?)[+] Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: [css] view plaincopy .Absolute-Center

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

1.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto;来实现水平居中,而一直认为margin:auto;不能实现垂直居中......实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin : auto ; position : absolute ; left : 0 ; right : 0 ; top : 0; bottom: 0; } 优点: 1.支持跨浏览器,包括IE8-IE10: 2.无需其他

div如何居中

整理一点关于div居中的方法.哪里有不妥欢迎大家拍砖~ div里的内容如何居中: 水平居中(非块级元素): text-align:center; 垂直居中: vertical-align:middle; 内容是文字的话,可以将height和line-height设置成一样的值: 简单方法(但不是全部兼容): 1 display: -webkit-flex; 2 display: flex; 3 -webkit-align-items: center; 4 align-items: center;

如何设置DIV水平、垂直居中

一.水平居中 需要设置两点: 1  设置DIV 的width属性即宽度. 2  设置div的margin-left和margin-right属性即可 代码: <div style="width:800px; margin-left:auto; margin-right:auto; color:White; height:400px">DIV居中</div> 二.DIV垂直居中 同样的道理,需要设置两点: 1  设置DIV 的height属性即宽度. 2  设置d

左边图标右边文字,在div里居中

图1 图2 css制作: 左边一个小图标,右边文字,两者之间一点间隔,再在一个div 里面居中显示.(div不设置宽度) 第一种做法: 图3 图4 .m-sn {    font-size: 12px;    color: #999;    background-color: #FFF;    line-height: 22px;    height: 22px;    padding-bottom: 24px;    text-align: center; // 这是最常用的} .m-sn s