首先在css样式表中先写上 *{margin:0; padding:0;}，解决了大部分问题
1、div层水平居中
只要在你所需要居中的层css样式加上 “margin:auto”即可；有介绍“margin:0 auto”或者“margin-left:auto; margin-right:auto;”其实一个意思。
2、div层内文字水平居中
层内css样式加上text-align:center;
3、div层内单行文字垂直居中
文字在层中垂直居中vertical-align 属性是做不到的。有人推荐了比较巧妙的方法就是:设置height的高度与line-height的高度相同!
但ie和火狐的解析一个向上偏移2px一个向下偏移2px，在层height比较大的时候，可以忽略，但在height比较小的时候，这是很明显的。
一个可行的方法就是设置padding-top和line-height结合，当然两者加起来不要超过height值，避免在ie6下变形，当然你也可以overflow避免。
4、div层中的多行文字
这个好办，只要设置好padding，一切ok
5、div层内图片，input垂直对齐
一个最简单的办法就是把他们都声明为块 “display:block”。注：你若设置为float:left或float:right，就默认为块级了，无需另外声明块。
参考文章：
http://www.chengying.info/webgame_b.php/pid_24.html
分享到：
相关推荐
第10章 理解CSS定位与div布局 10.1 div标记与span标记 10.1.1 概述 10.1.2 div与span的区别 10.2 盒子模型 10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 ...
效果描述： 首先还是那句老话，非常幸运我们现在可以使用CSS3布局。 在布局的传统解决方案中，都是基于盒状模型，依赖display属性、position属性、float属性... 给你需要居中的div的父辈div增加附件中关键样式即可
在布局的传统解决方案中，都是基于盒状模型，依赖display属性、position属性、float属性，这种方式比较传统，对于那些特殊布局来说非常不方便，比如，垂直居中就不容易实现。 尤其是现在移动设备如此多的今天，需要...
CSS 将button按钮垂直+水平居中 参考文章：CSS实现垂直居中的5种方法 具体效果如图： 这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度...
line-height:+数字+单位（在CSS布局中我们一般采用像素px为单位）行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。 二、行高应用介绍 ...
横向导航 CSS样式嵌套 div+css处理firefox与IE6的水平居中效果 div+css的padding缩写方式 div+css的格式较验 div+css的重要工具:Internet Explorer Developer Toolbar div+css使用!important标记...
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。 1、首先介绍使用css属性让整体布局的居中： 设置对象的父级内容居中，这里一个页面的为父级是什么呢？...
css样式 1. 配合定位与margin：auto 父元素加相对定位，子元素加绝对定位 .main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; ...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的...
目 录 前 言 1 第一章 网站开发背景 2 第一节 web概述 2 一、认识WEB 2 二、认识WEB2.0标准 2 第二章 DIV+CSS详解 5 第一节 DIV+CSS简介 5 第二节 级联样式表简介 6 第三节 DIV+CSS布局的优点 6 一、利于搜索引擎...
最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧查阅资料分析一波，给各位分享一下，避免落坑。 首先先说明一下html和一些基础css样式，下面就不再赘述...
之后本书又着重讨论如何使用DIV结合CSS来搭建网站，同时也介绍了CSS在Dreamweaver中的应用。并且对于在CSS制作过程中遇到的Bug进行了详细的分析。 本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 ...
style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章（源代码\第16章） 示例描述：本章演示字体属性用法。 间距与间隔....
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
语义化标签：段落标签，标签自定义文字样式，标题标签，<div>块，标签定义头部，标签定义底部，标签定义正文区段，标签定义侧边栏区域； 效果标签： 标签实现换行效果，特殊字符 实现空格效果，标签实现...
<div class=”v-align”>垂直居中</div> 清除浏览器默认样式 1.用其他有名的库来清除（如：YUI) 2.自已清除 如： * {padding: 0;margin:0;} 让A支持所有浏览器 Html代码 复制代码代码如下: <style type=”...
相对于代码条理混乱、样式杂糅在结构中的表格布局，CSS将带来全新的布局方法，让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法，并对CSS的“盒模型”作详细阐述。相信读者在深入理解“盒模型”...
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位，而div首当其冲。对于其他标签而言，往往有它自身存在的目的，...因此有人称CSS布局为div+css布局。 3.1.2 如何使用div 只需要应用<di