zoukankan      html  css  js  c++  java
  • DIV水平居中的几种方法

    1、设置左右的margin为auto

    div{
            margin: 20px auto;

          800px;
        }

    此方法要有这个声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    并且,设置的居中元素要有一个固定的宽度;

    2、相对定位与负的边距

    div{        

        position:relative;
        760px;
        left:50%;
        margin-left:-380px

          }

    这段代码的意思是,设置wrap的定位是相对于其父元素body标签的,然后将其左边框移动到页面的正中间(也就是left:50%含意);最后我们再从中间位置向左偏移回一半的距离来,这样就实现了水平居中了。

    3、padding方法:(有待验证)

    当一个对象没有设置具体宽度,可以用下面的方法来实现。这样的设计我们是使用的像元素的padding来设置的,实际中我们是改变了父元素的容器大小:

    如我们希望div元素长度随窗口而改变,同时又维持居中,我们就可以这样写:

    body { padding:10px 150px; }

    原理是需要保持父元素左右两侧的填充是相等的。

    另外,MS可以通过JS来实现,那个以后有需要再研究。

      

  • 相关阅读:
    为上次写的框架加了一个辅助功能
    复制文件夹下所有文件
    进制之间的相互转换
    c# 修改appConfig文件节点
    GUID
    太悲哀了
    poj2411 Mondriaan's Dream
    poj3311 Hie with the Pie
    HDU3001 Travelling
    luogu p2622关灯问题II
  • 原文地址:https://www.cnblogs.com/ada313/p/3408578.html
Copyright © 2011-2022 走看看