精华内容
下载资源
问答
  • 谨以此篇献给那些和我一样使用 myeclipse 开发,为了在 IE 下居中一直使用 text-align:center 居中的童鞋,接下来介绍让IE也支持margin居中的实现方法
  • CSS之关于MARGIN居中

    2017-02-09 08:28:57
    CSS之关于MARGIN居中
    margin:0 auto; 
    这个等价于 margin:0 auto 0 auto; 
    也等价于 margin-top:0;  margin-right:auto;  margin-bottom:0; margin-left:auto; 
    auto就是左右边距为自动,就是居中的属性,0就是上下边距0。
    顺序依次是 上,右,下,左。
    展开全文
  • 让IE也支持margin居中

    2012-06-06 11:35:34
    让IE也支持margin居中 谨以此篇献给那些和我一样使用 myeclipse 开发,为了在 IE 下居中一直使用 text-align:center 居中的童鞋。 废话不多说,解决办法是在 DOCTYPE 中加上 ...

    让IE也支持margin居中

    谨以此篇献给那些和我一样使用 myeclipse 开发,为了在 IE 下居中一直使用 text-align:center 居中的童鞋。

    废话不多说,解决办法是在 DOCTYPE 中加上 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd",如下一段简单的代码便可在主流浏览器中居中,包括IE6:

    复制代码
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>margin auto</title> 
    </head>
    <body>
        <div style="width:100px;height:100px;margin:auto auto;background:red;">
        </div>
    </body>
    </html>
    复制代码

    还有的解决办法就是使用 XHTML 文件头:

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>margin auto</title> 
    </head>
    <body>
        <div style="width:100px;height:100px;margin:auto auto;background:red;">
        </div>
    </body>
    </html>
    复制代码

      

    --------------------------后话---------------------------------------------------

    我是一直使用 myeclipse 开发,不管前台后台,因为 myeclipse 生成的 jsp 文件 DOCTYPE 文件头不包含 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" dtd 文件,使得我一直认为 IE 不支持 margin 居中,再加上一个学 C# 的童鞋也是建议我不要一直使用 margin 居中,IE 对 auto 解析的不够好(引用他人,非本人观点),使得我以前都是使用 text-align 居中,想想就悲催,那多写了多少代码啊?不知伤了多少脑细胞,对于一个程序员而言,脑细胞多重要啊。

    myeclipse 自动生成的文件头是:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
    ...

    展开全文
  • (意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果,但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见原因引起的: 1、没有设置宽度 2、没...
  • 居中也分两类,水平居中和垂直居中 ...最简单的居中就是整个页面里就一个div,居中代码:margin : num px auto;(num是距离页面上沿的距离) 第二个情况是div1里套了个div2,要让div2在div1里居中,代码:.div2{m...

        居中也分两类,水平居中和垂直居中

    首先是水平居中

        最简单的居中就是整个页面里就一个div,居中代码:margin : num px auto;(num是距离页面上沿的距离)

        第二个情况是div1里套了个div2,要让div2在div1里居中,代码:.div2{ margin: num px auto; },不过这里要注意,div1中要加上overflow: hidden,否则num不起作用

        第三个情况是div1里有两个div,分别是div2和div3,代码和上一个情况一样

        第四个情况是div1里也有两个div,分别是div2和div3,但是这两个div要在一行中显示,并且整体要居中,这种情况我的做法是再创建一个div4,把div2和div3放进去,div4的width就是div2和div3的整体的width的一致,然后执行.div4{ margin: num px auto; }即可

    关于垂直居中,其实我并没有什么太好的办法,我目前的做法是根据高度算出居中的位置,然后用

    margi-top调整

    转载于:https://my.oschina.net/u/3266829/blog/841743

    展开全文
  • 今天在写div时发现不居中, div{ margin:0 auto; } 那么给div一个固定的宽度,就会居中了 div{ margin:0 auto; ...

               今天在写div时发现不居中,

               div{

                         margin:0 auto;

                }

               那么给div一个固定的宽度,就会居中了      

               div{

                         margin:0 auto;

                         width:500px;

                }

    转载于:https://www.cnblogs.com/xshang/p/3869779.html

    展开全文
  • 写好的html复制到jsp文件中,在浏览器中会出现margin居中无效的情况,纯html中没有这个问题。Jsp是使用myeclipse新建的(Advanced Templates),其生成的DOCTYPE如下: 3C//DTDHTML 4.01 Transitional//EN"> 而使用...
  • 使用margin居中常见问题

    千次阅读 2012-02-28 15:38:41
    (意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果,但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见原因引起的: 1、没有设置宽度 [CSS...
  • 在进行学习时,遇到了居中问题,按照视频...在本布局使用 margin: 0 auto;属性 可以实现 text-align属性可以设置 form的居中 关于边距叠加 边距合并指的是,当两个垂直外边距相遇时,它们将形成
  • css margin:0 auto居中

    2020-09-25 12:02:50
    很久没有写日记了,归根结底是很久没有学习了,一直都在工作,一直用到margin居中,也郁闷很了很久,网上看了大把的问答,最后自己就着一个例子,然后研究了一下,其实div居中不那么难!
  • margin 如何居中

    2014-01-02 14:20:00
    #id { margin-left: auto; margin-right: auto;width:100px}一定得增加width:100px这一个属性。margin:[N]px auto;width:[N]px;才可以导致对应的元素居中, 单单用margin-left: auto; margin-right: auto;是没办法...
  • 页面中元素居中效果分为三种情况,1.水平居中,2.垂直居中,3.水平垂直居中下面代码视图层统一代码结构:<div class="father"> <div class="son"></div> </div>1.水平居中:应用场景:整体...
  • margin:0 auto;居中的原理

    千次阅读 2019-06-09 10:12:30
    margin居中原理 刚刚学习CSS的时候,经常需要用到块元素居中,于是乎度娘、google一番,当然查专业资料建议用google,题外话!学会了给块元素设置个width,然后给margin特性设为0 auto,如此块元素便缴枪投降,...
  • margin无法居中原因

    2016-11-18 21:49:00
    1.要给居中的元素一个宽度,否者无效。 2.该元素一定不能浮动,否者无效。 3 在HTML中使用标签,需考虑好整体构架,否者全部元素都会居中的。 转载于:https://www.cnblogs.com/znsongshu/p/6079251.html...
  • margin布局居中显示

    2017-04-18 13:31:28
    html> html lang="en"> head> meta charset="UTF-8"> style> div{ width: 500px; height: 200px; background-color: #cccccc; /*布局居中显示*/
  • margin position 定位居中
  • css margin auto 水平居中

    2019-09-28 16:37:30
    css margin auto 水平居中 为什么margin:auto能够使得水平居中?根据网上的各种答案整理如下: 1.对于水平方向的margin auto,其计算值取决于可用空间,若水平方向的margin-left margin-right都设置了...
  • 主要介绍了ie下margin居中的三种解决方法,需要的朋友可以参考下
  • margin 水平居中原理

    2009-04-01 13:55:52
    如果要使 一个 div在屏幕上水平居中 ,标准的做法是 margin -left: auto; margin -right: auto; 根据css 标准 关于水平格式的属性 : margin-left ,border-left,padding-left,width,padding-right,border-...
  • margin 实现水平居中,垂直居中原理

    千次阅读 2019-05-31 00:54:35
    首先了解下,margin的auto属性的作用是用来分配剩余空间,所以对于有剩余空间的元素才有效哦(块及元素)。比如图片设置margin: 0 auto是无效的,因为图片是内联元素,不是占一整行,没有剩余空间。 1.块及元素水平...
  • 通过margin居中 这种方式适用于display属性是block或者inline-block时适用,因为inline element无法设置文字方向的margin。下面的代码使用了margin属性的shorthand,第一个值0将交叉轴方向margin设为0,第二个值...
  • flex+margin实现居中

    2017-10-16 15:20:39
    *{ padding:0; margin:0; } .f{ width:500px; height:500px; background:red; displa
  • margin:auto实现居中

    千次阅读 2017-01-20 13:15:22
    使用margin实现元素居中效果
  • 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: <div id=cnbruce>margin: 0 auto 看看内容居中否</div> 如上调试结果,IE6.0是不居中的...
  • 块元素水平居中margin

    2020-08-07 22:05:29
    水平居中: 1. 设置div盒子的宽度 2. 设置margin左右为auto
  • margin 属性以及居中

    2009-04-13 17:02:03
    如何使DIV居中主要的样式定义如下:body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,377
精华内容 4,550
关键字:

margin居中