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里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在DIV 中垂直居中

用背景的方法。举例:

body{BACKGROUND: url(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"><p>test content</p></div>
</body>
</html>
说明:

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

时间: 2024-12-30 08:11:19

css布局中的居中问题的相关文章

学习网页技巧: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布局中的居中问题

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 c

XHTML+CSS布局中兼顾SEO的两点建议

  XHTML+CSS布局模式因其表现和内容相分离,提高搜索引擎对网页的索引效率,代码简洁.提高页面浏览速度,易于维护和改版等众多优点而在广泛地被人们所接受.以下笔者结合手机商务类网站,对XHTML+CSS布局中兼顾SEO进行一些总结,希望能给站长同仁一些有益的参考. 一.做好网页的架构分析工作,是设计好网页的前提 一个拥有高访问量的网站是成功网站的一个衡量因素,我们在设计网页时要根据主题的不同进行合理的板式选择和色彩配,将网站要达到的宣传效应通过合理搭配而构成的美丽页面来吸引客户的兴趣,促使他

如何使文本在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><

CSS布局中自适应高度的解决方法

css|解决|自适应 这是div+css布局中经常会碰到的基础问题,个人觉得采用背景图填充的方法,还是比较简单和切实可行的.最终效果. CSS源代码: body{ background: #EDEDED; font-size: 70%; font-family: Arial, Helvetica, sans-serif; line-height: 130%; color: #666666; margin: 0; padding: 0; text-align: center; } #layout{

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 最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段也许比较长的时间,除非MS把它捆绑在某个操作系统上,如何在现有基础上(IE6 80-90%),合理.妙用最小高度了? 假定有二个BOX,我们需要它的最小高度为150PX. CSS      div.box1,div.box2{      width: 300px; 

简述CSS布局中的基础知识

刚接触设计工作的朋友不得不使用CSS,本文就简单介绍一些在使用CSS的时候经常用到的一些属性的使用信息,希望对你有所帮助. 一.可设置的CSS属性包括:字体属性.文本属性.颜色及背景属性.边框属性.容器属性(边距属性.填充属性).分类属性.鼠标属性. 二.基础属性 字体属性:font-family font-style font-variant font-weight font-size 文本属性:word-spacing letter-spacing text-decoration verti