• DIV局中


    一 水平居中
    IE6&IE7
    居中的div的父级元素中设置TEXT-ALIGN: center;即可实现此div居中
    Firefox在此居中的div中加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;或者margin: 0 auto;即可


    二 垂直居中
    1.  固定高度
    vertical-align:middle;表示行内垂直居中,将行距增加到和整个DIV一样高line-height:200px;
    然后插入文字,就垂直居中了。

    <html>
    <head>
    <style>
    body{TEXT-ALIGN: center;}
    #center{
    MARGIN-RIGHT: auto;
    MARGIN-LEFT: auto;
    background:#F00;
    400px;
    vertical-align:middle;
    height:200px;
    line-height:200px;
    }
    </style>
    </head>
    <body>
    <div id="center"><p>test content</p></div>
    </body>
    </html>

    2.  未知高度
         尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。
         a. 标准浏览器(如Firefox, Opera, Safari等)
            垂直居中,Firefox中可将父级元素显示方式设定为TABLE(display: table;) ,或内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。
            <div style="display: table-cell; vertical-align: middle; height: 600px; 800px; border: 1px solid red;">
                <p>垂直居中,Firefox only</p>
                <p>垂直居中,Firefox only</p>
                <p>垂直居中,Firefox only</p>
            </div>

         b. 非标准浏览器
            IE6&IE7非标准浏览器中则需要借助css的特点实现垂直居中,只能在子元素里设距顶部50%,里面再套个元素距顶部-50% 来抵消。
             <div style="border: 1px solid red; height: 200px; position: relative;">
                 <div style="position: absolute; top: 50%;">
                     <div style="position: relative; top: -50%;">
                         <p>垂直居中,IE6 only</p>
                         <p>垂直居中,IE6 only</p>
                         <p>垂直居中,IE6 only</p>
                     </div>
                 </div>
            </div>
            c. 完美兼容解决方案
               <div style="border: 1px solid red;  position: relative; height: 200px;display: table-cell; vertical-align: middle;">
                 <div style="position: static !important; position: absolute; top: 50%;">
                     <div style="position: relative; top: -50%;">
                         <p>垂直居中,Firefox IE6 only</p>
                         <p>垂直居中,Firefox IE6 only</p>
                         <p>垂直居中,Firefox IE6 only</p>
                     </div>
                 </div>
            </div>
            d. 另一种解决方案 
           

    CSS

    以下是引用片段:
    body {padding: 0; margin: 0;}
    body,html{height: 100%;}
    #outer {height: 100%; overflow: hidden; position: relative; 100%; background:ivory;}
    #outer[id] {display: table; position: static;}
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {display: table-cell; vertical-align: middle; position: static;}
    #inner {position: relative; top: -50%; 400px;margin: 0 auto;} /* for explorer only */
    div.greenBorder {border: 1px solid green; background-color: ivory;}


    xhtml

    以下是引用片段:
    <div id="outer">
      <div id="middle">
          <div id="inner" class="greenBorder">
          </div>
      </div>
    </div>


    以上CSS代码的优点是没有hacks,采用了IE不支持的CSS2选择器#value[id]。
    CSS2选择器#value[id]相当于选择器#value,但是Internet Explorer不支持这种类型的选择器。同样地.value[class],相当于.value,这些只有标准浏览器能读懂。

    注意:
    !important标记,Firefox & IE7支持!important标记,IE6忽略!important标记
    在网页中的用法:
    比如:在IE6中是蓝色,但是在Firefox & IE7中优先红色。 background-color:red !important;background-color:blue; 此属性必须在一行里面,不能换行。换行则失效。因为样式background-color只能定义一个,换行它默认background-color有多个定义。

    其他元素居中

    1、UL居中和li水平居中:

    其实任何居中,只要是web元素,可加上id属性的都可以使用Div居中的方法。
    只是要记住需把ul、li的宽度设置一下才,最好加个背景色才可以看出是否居中。
    否则ul、li默认是一条撑满div,是看不出是否居中的。

    2、image居中:
    也可用上述Div方法,但我发现有时直接用最简单的<div align=center><img src=”xxx.jpg”></div>,维护起来更方便


    body{BACKGROUND: url(http://image.99read.com/pic/smallbanner/li_5398_mid_080324112649.gif) #FFF no-repeat;}
    body{TEXT-ALIGN: center;}

  • 相关阅读:
    1.两数之和 力扣,水题
    525.连续数组 力扣 (前缀和)
    [LeetCode]56. Group Anagrams变位词分组
    界面布局注意(一)
    docker常用命令
    docker常用批量操作命令
    Golang package之math/rand
    (三)虚拟机与Linux新尝试——20155306白皎
    洛谷 P1383 codevs 3333 高级打字机
    BZOJ 1013 cogs 1845 [JSOI2008]球形空间产生器sphere
  • 原文地址:https://www.cnblogs.com/anan/p/1129736.html
Copyright © 2020-2023  润新知