css布局中的居中问题

2016-02-19 19:33 3 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

如何使DIV居中
主要的样式定义如下:

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

说明:

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

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

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

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

body{BACKGROUND: url(/Upload/2005-12/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;
width:400px;
vertical-align:middle;
line-height:200px;
}
/style
/head
body
div id="center"ptest content/p/div
/body
/html

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

说明:

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

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

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

延伸阅读
标签: Web开发
有朋友使用DIV居中,但是却发现DIV居中失灵了,是怎么回事呢?下面给大家解决一下问题,呵呵! 1、一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 就可以了!其实其他...
标签: Web开发
不知道大家知道这个问题不,在ie6的情况。假如ul中的li被设置了浮动,而ul本身有设置padding-top.你会发现li无端端多出了根ul的padding-top一样宽的margin-top(在浮动的li元素的数目已使分行的时候出现)。 解决方法: 1.请不要设置ul的padding,可以用margin代替,实在不行只能嵌套解决。 2.给ul设置zoom:1;overflow:hidden 3.设置ul的...
标签: Web开发
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看 测试页面 ,有简短解释。) 方法一 这个...
标签: Web开发
相信学过CSS的朋友都知道CLASS这个东西,不知道你平时制作网页时是怎么应用的,我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧 我把class分为2种,布局class,风格class,布局class是骨架,风格class是衣服 举个例子: 比如布局中的左栏 首先它的属性有:是左栏,宽度,背景颜色,字体颜色等 1.首...
标签: Web开发
刚学css div布局,总会遇到很多浏览器兼容的问题,这个问题困扰了一段时间,只到看了精通css才看到几个解决办法。 1.加clear空div .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {heigh...

经验教程

102

收藏

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