学习网页技巧: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-11-05 03:46:04

学习网页技巧: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

学习网页标准CSS样式表设置的10条技巧

css|标准|技巧|网页|样式表 1.CSS 字体简写规则 当使用css定义字体时你可能会这样做: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; 事实上你可以简写这些属性: font: 1em/1.5em bold italic small-caps verdana,serif 现在好多

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><

DIV+CSS布局中的兼容性问题hack做法

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

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布局中header部分的优化

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

学习网页技术CSS样式表整理的20个技巧

css|技巧|网页|样式表 1. CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif 但也可以把它们全部写到一行上去: font: bold italic small-caps 1em/1.5em verdana,sans-serif