DIV+CSS布局中的居中问题

1、DIV居中

body {text-align: center;}
div {margin-right: auto; margin-left: auto;}

说明：对于IE，在父元素定义“text-align: center;”就可以了对于FF等其他浏览器，仅这样不能居中，需在子元素中定义“margin-right: auto; margin-left: auto;”。

2、背景居中

body {background:url(#) #fff no-repeat center;}

说明：参数中的center是对背景位置的定义。

3、文本垂直居中

div {vertical-align:middle;line-height:？px;}

说明：vertical-align:middle;表示行内垂直居中，我们将行距调整到和整个DIV一样高，文字就垂直居中了。
　
这篇文章还详细列出了DIV里面图片垂直居中的几个方法，您可以去看看

时间： 2024-09-01 09:57:16

DIV+CSS布局中的居中问题的相关文章

如何使文本在DIV+CSS布局中垂直居中

css DIV+CSS布局中垂直居中的实现. <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+CSS布局中的兼容性问题hack做法

DIV+CSS布局中的兼容性问题,除了一些小技巧外,常常还需要结合CSS Hack写法来解决.CSS Hack的原理是针对各浏览器对CSS属性的支持和解析结果不同,以及CSS执行中的优先级问题,来针对不同浏览器写不同的CSS. 1)IE中浮动错位问题 经常,我们定义一个DIV浮动的时候,特别是CSS里有用到margin属性,Mozilla Firefox正常,但是IE中这个DIV会跑到下一行去,解决办法很简单,你只需要在你的CSS属性里加上句:display:inline,如:  代码如下 复制

div+css布局中header部分的优化

在div+css布局中,一般都这样来整体构架的: <div id="header"></div><div id="center"></div><div id="footer"></div>而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: <div id="header"> <

css布局中的居中问题

css|问题 如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "

学习网页技巧：css布局中的居中问题

css|技巧|网页|问题 如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

DIV+CSS布局中无法显示背景颜色是怎么回事

div css新手布局会遇到布局的背景颜色无法显示,一般布局背景无法显示通常原因如下: 1.由使用float浮动造成浮动产生无法显示css背景颜色 2.高度不够而产生背景无法显示 接下来我们分别介绍无法显示背景颜色或图片的原因和解决方法. 一.css float浮动产生浮动无法显示背景样式颜色 假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属性样式,这个时候该对象浮动产生,导致该对象不能撑开,所以css背景颜色就不能无法显示,解决方法有三种,一个是设置c

DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags_经验交流

做DIV+CSS页面,不推荐使用的标签代码,请尽量不要使用这些HTML标签: Do not use these html elements in html pages.  Presentational elements should not be used.  Support for some elements has been (or will be) deprecated; they should not be used.  Don't Use These Tags  Presentatio

网页文字在DIV+CSS布局中垂直居中的问题

css|网页|问题 1.单行文字 设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围. div{ height: 20px; line-height: 20px;

DIV+CSS布局中如何组织样式表以便于简化和维护

对于简单的Web站点,可以只使用一个CSS文件.对于大型的复杂站点,对样式表进行分割以便简化维护是一种好做法.如何分割样式表是需要仔细考虑的.我一般用一个CSS文件处理基本布局,用另一个文件处理版式和设计修饰.这样的话,在布局确定之后,就很少需要修改布局样式表.这可以防止布局样式表被意外地改动或破坏. 还可以进一步细分,比如用单独的CSS文件处理颜色.这样的话,如果希望提供新的颜色方案,就只需要创建一个新的颜色样式表.如果站点上有许多表单,那么可以用单独的CSS文件处理所有表单样式.可以只在需要