`

让DIV+CSS制作的网页居中,很简单的方法【原】

阅读更多
我写网页是包在一个叫 #container 的DIV中的,所以这里主要讲一下BODY与#container之间的关系。

     先看一下body的CSS样式:

     body{ margin:0;padding:0;text-align:center;}

     这里的body把margin与padding设置为0,这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中,这样就包括了#container也一起居中了。

     再来看一下#container的样式:

     container{width:760px;margin:0 auto;text-align:left;position:relative;}

     学问就在这个#container里了: 给这个容器设定了宽度,这里是760px,margin:0 auto; 这里的margin中的第一个0是上下、第二个auto是左右。上下为0左右让其自控。再加上定位为相对,只有定位为相对的元素才可以有位置移动!

 

分享到:
评论

相关推荐

    DIV+CSS水平垂直居中

    DIV+CSS 水平垂直居中网页学习 DIV+CSS 水平垂直居中是Web开发中一个常见的问题,如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...

    DIV+CSS DIV居中布局

    总的来说,`DIV+CSS`的居中布局有多种实现方式,选择哪种方法取决于具体的需求和浏览器兼容性考虑。随着现代浏览器对Flexbox和Grid的支持日益增强,它们已经成为实现居中布局的首选方法。然而,对于老版本浏览器,`...

    DIV+CSS简单登录界面模板

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

    适合初学者的39个div+css网页布局例子

    本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们精心准备的,旨在帮助他们快速掌握Div+CSS的基础知识和实践技巧。 首先,我们要理解Div(Division,分隔)元素在HTML中的作用。...

    Div+CSS简单布局

    要让Div居中,有多种方法,包括使用`text-align`、`margin`、Flexbox或Grid。 1. **Text-align居中**:如果Div是内联元素,可以设置父元素的`text-align: center`使其居中。 2. **Margin居中**:对于块级元素,...

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    css,div+css

    【CSS和Div+CSS布局详解】 CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。在网页设计中,`div+css`布局是一种常见的网页布局方式,它将结构...

    DIV+CSS导航栏

    `DIV+CSS`导航栏是这种布局技术在网页头部导航设计中的典型应用。本篇将深入探讨如何利用`DIV+CSS`创建导航栏,并介绍如何通过JavaScript进行动态控制。 首先,`DIV+CSS`导航栏的基本结构通常包括多个`<div>`元素,...

    div+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的...

    使用div+css开发个人网站毕业设计.doc

    此外,文档还提到了div+css在不同浏览器间的兼容性问题,例如div的垂直居中、margin加倍、IE浏览器特有的显示问题等,并给出了相应的解决策略。这提醒开发者在设计时需考虑跨浏览器兼容性,确保网站在各种环境下都能...

    Div+CSS 样式的使用演示

    在网页设计领域,Div+CSS布局是现代网页标准制作的核心技术之一。Div(Division)是HTML中的一个块级元素,用于对网页内容进行区域划分,而CSS(Cascading Style Sheets)则是用来控制这些区域样式和布局的重要工具...

    Div+Css实例源代码

    综上所述,Div+CSS技术实例源代码涵盖了网页布局、样式控制、盒模型理解、布局技巧以及响应式设计等多个方面,通过学习和实践这些实例,我们可以提升网页设计的技能,实现美观且功能完善的网页。

    网页制作的课件 div+css技术

    网页制作是数字时代不可或缺的技能之一,而"div+css"技术则是网页布局与设计的核心。这个名为"网页制作的课件 div+css技术"的压缩包文件包含了关于这一主题的上课资料,可能是讲师的讲义、练习题或示例代码,旨在...

    Div+CSS 布局 实例 源码

    《Div+CSS布局实例源码》...通过这些实例的实践,学习者可以逐步提高自己的Div+CSS布局能力,从简单的网页布局到复杂的设计需求,都能得心应手。无论是初学者还是专业开发者,这个实例源码包都将是一份宝贵的参考资料。

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    div+css图片垂直居中

    "div+css图片垂直居中"是这个话题的核心,它涉及到CSS布局和浏览器兼容性问题,特别是对于Internet Explorer(IE)和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**: CSS中的定位...

    div+css实现div的多层重叠,并且居中显示

    我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的知识,自己摸索哦。终于成功了,O(∩_∩)O~ 分享出来。...

    Div+CSS布局入门教程(一二三四)

    Div+CSS布局是网页设计中的重要技术,它通过分离样式和内容,使得网页设计更加灵活、可维护性更强。本教程将带你一步步入门Div+CSS布局,从基础概念到实际操作,帮助你掌握这种布局方式。 首先,了解Div(Division...

    一个DIV+CSS+JAVASCRIPT+FLASH的简单设计网站

    《构建基于DIV+CSS+JAVASCRIPT+FLASH的简单设计网站详解》 在Web开发领域,一个优秀的网站设计不仅需要美观的界面,还需要良好的用户体验和技术支持。本篇文章将深入探讨如何利用DIV+CSS+JAVASCRIPT+FLASH技术来...

Global site tag (gtag.js) - Google Analytics