zoukankan      html  css  js  c++  java
  • 多种浏览器下CSS控制DIV居中的代码

      关于CSS 控制DIV水平居中问题,我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书,那个里面谈到居中使用。

      margin-left:auto;
      margin-right:auto;

      其实等同于:

      margin:0 auto;

      于是可以使用这种方式,但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

      非常多的人犯过类似的错误!这种方法也可以说屡试不爽,但是在某些情况下还是行不通的。于是有了第二种方法。

      margin-left:50%;
      left: -width/2;

      这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽,那么你就应该设置left:-384px。很好,已经有两种方法了,可以说已经能够解决你可能遇到的问题了。

      有时候你会发现,这两个还不行。不能兼容一些浏览器。于是发现有了第三种方法,这中方法主要是考虑IE,它是建立在第一种方法的基础之上。它需要设置body。

      body {text-align: center;}

      这样IE下也居中了,但是它带来一个新的问题,你发现你的页面中所有文字都是居中的,这样很不好看。这个就很容易解决了,只需要在你的DIV定义中加上 text-align: left; 之类调整的设置就行了。

      以上文字仅是一个饭后参考与小品。大家在实际工作中可以引起注意!

    如何使DIV居中,div垂直居中,div水平居中.
    主要的样式定义如下:

    body {TEXT-ALIGN: center;}
    #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

    说明:
    首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

    需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

    如何使图片在DIV 中垂直居中
    用背景的方法。举例:

    body{BACKGROUND: url(
    http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
    关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"

    效果如下:

    如何使文本在DIV中垂直居中
    如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:

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

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

    http://www.google.cn/search?hl=zh-CN&q=div+%E5%B1%85%E4%B8%AD&meta=&aq=2&oq=div

    申明

    非源创博文中的内容均收集自网上,若有侵权之处,请及时联络,我会在第一时间内删除.再次说声抱歉!!!

    博文欢迎转载,但请给出原文连接。

  • 相关阅读:
    Spring Boot 使用 Dom4j XStream 操作 Xml
    Spring Boot 使用 JAX-WS 调用 WebService 服务
    Spring Boot 使用 CXF 调用 WebService 服务
    Spring Boot 开发 WebService 服务
    Spring Boot 中使用 HttpClient 进行 POST GET PUT DELETE
    Spring Boot Ftp Client 客户端示例支持断点续传
    Spring Boot 发送邮件
    Spring Boot 定时任务 Quartz 使用教程
    Spring Boot 缓存应用 Memcached 入门教程
    ThreadLocal,Java中特殊的线程绑定机制
  • 原文地址:https://www.cnblogs.com/Athrun/p/1436206.html
Copyright © 2011-2022 走看看