解决用CSS控制DIV居中失效的问题

2016-02-19 19:44 143 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享解决用CSS控制DIV居中失效的问题,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

  有朋友使用DIV居中,但是却发现DIV居中失灵了,是怎么回事呢?下面给大家解决一下问题,呵呵!

  1、一般情况下DIV居中失效是因为没写DTD语句

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  在页面的最上方加上:

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  就可以了!其实其他很多css的问题也是因为没有加上dtd语句引起的。

  2、使用margin来让DIV居中

  最简单的写法就是:

  .divstyle{ margin:0 auto; }

  复杂一些就把左右边距都加上:

  .divstyle{ margin-left:auto; margin-right:auto; }

  这样就可以试想DIV居中了!

来源:https://www.tulaoshi.com/n/20160219/1621681.html

延伸阅读
标签: Web开发
如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LE...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / meta http-equiv="Content-Language" content="zh-...
标签: Web开发
Div上下居中-www.51windows.Net 我站在中央了center 我站在中央了center [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
在前面的文章中我简单总结了一个CSS在页面布局中实现div水平居中的方法,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。     在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置...
标签: Web开发
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center     在现代浏览器(如Internet E...

经验教程

750

收藏

33
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部