`

DIV+CSS DIV居中布局

CSSIEFirefox浏览器JavaScript 
阅读更多
利用DIV+CSS布局时，经常需要利用DIV居中，很多时候如果不知道怎样设置CSS，需要写大量的代码和复杂的Javascript来让DIV居中，其实利用CSS，可以轻松的设置DIV居中，而且对IE和Firefox都适用。

其实非常简单，只需要两行代码就可以了： 
width:900px;
margin:0px auto;


我们要给一个DIV设置它的宽度，然后设置margin的左边和右边的边缘都是自动auto. margin:0px auto

具体代码有：
DIV：
<div id="mainBody">

CSS：
#mainBody{
width:900px;
margin:0px auto;
margin-top:20px;
font-size:14px;
}

具体的代码可以参考附件。
另外在利用DIV+CSS布局时，最好写上Doctype：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 否则不用的浏览器，不同的浏览器版本，可能会产生不同的页面显示效果。

文章地址：http://javapub.iteye.com/blog/709361
0
顶
1
踩
分享到：
| Thinkpad风扇控制软件 ThinkPad FanControl
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV+CSS水平垂直居中

    使用DIV+CSS实现水平垂直居中的优点是可以使网页布局更加灵活和灵活，可以根据需要随时调整DIV元素的位置和大小。此外，使用CSS样式还可以使网页更加美观和简洁。 四、DIV+CSS水平垂直居中的应用场景 DIV+CSS水平...

    DIV+CSS 图片垂直居中效果

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

    DIV+CSS简单登录界面模板

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

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

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

    Div+CSS简单布局

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

    Div+CSS 布局 实例 源码

    1. **基础布局概念**：了解Div如何作为容器元素，以及如何通过CSS控制其宽高、内外边距、浮动和定位等属性，实现常见的如居中、对齐、多列布局等。 2. **盒模型理解**：理解CSS盒模型，包括内容(content)、内边距...

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

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

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

    8. **Flexbox布局**：现代CSS布局模型，能够轻松处理各种复杂的弹性布局，如居中对齐、自适应高度等。 9. **Grid布局**：CSS Grid提供二维布局，可以方便地创建复杂的、响应式的网格系统。 通过实践这些例子，初学...

    DIV+CSS导航栏

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

    Div+Css实例源代码

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

    css,div+css

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

    DIV+CSS上下左右绝对居中

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

    Div+CSS 样式的使用演示

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

    超级牛最详细的Div+CSS布局案例.docx

    DIV+CSS 布局案例详解 在本文中，我们将探讨超级牛最详细的 DIV+C SS 布局案例，具体来说，就是 DIV 固定宽度居中显示的实现方法。同时，我们还将讨论关于网站制作的经验之谈，从策划到制作的整个流程，以及 DIV+...

    Div+css页面布局资料(很好很强大)

    ### CSS盒子模型与Div+CSS页面布局 #### CSS盒子模型概览 在深入探讨Div+CSS页面布局前，我们首先需要了解CSS盒子模型的基本概念。CSS盒子模型是Web设计中的核心概念之一，它用于描述HTML元素如何根据CSS属性在...

    用DIV+CSS实现国内经典式三行两列布局

    ### 用DIV+CSS实现国内经典式三行两列布局 #### 布局概述 在Web设计领域，有一种常见的布局方式被称为“三行两列”布局，这种布局广泛应用于企业站点和其他展示类网站中。典型的特征包括：顶部通常放置大型导航栏...

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

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

    Div+CSS布局大全

    通过设置CSS样式，Div可以实现各种复杂的布局效果，如居中对齐、浮动、响应式设计等。 2. **CSS基础**：CSS允许开发者分离内容和表现，使网页设计更加灵活和易于维护。基本概念包括选择器（如类选择器、ID选择器、...

    Div+CSS布局居中.pdf

    【Div+CSS布局居中】是网页设计中一个常见的需求，本文主要介绍了四种使用CSS让元素水平居中的方法。这些方法适用于不同的浏览器环境，包括一些早期版本的IE浏览器，以及现代浏览器。 1. **自动外边距实现居中**： ...

Magicbox
Global site tag (gtag.js) - Google Analytics