CSS网页布局:div垂直居中的各种方法

操作方法

  • 01

    一、单行内容的居中 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了 .middle-demo-1{height: 4em;line-height: 4em;overflow: hidden;} 优点:1. 同时支持块级和内联极元素2. 支持所有浏览器缺点:1. 只能显示一行2. IE中不支持<img>等的居中要注意的是:1. 使用相对高度定义你的 height 和 line-height2. 不想毁了你的布局的话,overflow: hidden 一定要 二、多行内容居中,且容器高度可变也很简单,给出一致的 padding-bottom 和 padding-top 就行 优点:1. 同时支持块级和内联极元素2. 支持非文本内容3. 支持所有浏览器缺点:容器不能固定高度

(0)

相关推荐

  • Dreamweaver 怎么网页布局 div css布局

    div+css布局已经成为当前网页布局的潮流,通过盒子模型和浮动.定位来控制页面布局比以前的表格布局容易控制多了.如何用Dreamweaver实现div+css网页布局呢.小编为你分享我的. 操作方法 ...

  • DIV+CSS 网页布局常用的书写规范

    DIV+CSS 网页布局常用的书写规范 文件命名规范: 01 全局样式:global.css :框架布局:layout.css :字体样式:font.css :链接样式:link.css :打印样式: ...

  • CSS网页布局:div水平居中的各种方法

    在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识.不过,还是经常会有人问到这个问题,在这里我简单总结 ...

  • css控制比较div显示/隐藏方法的2种方法

    CSS中的display和visibility css中display和visibility语法,他们都可以隐藏和显示html元素.看齐来他们很相似,所以很多人还是会搞错.谈们的属性分别如下: 操作方 ...

  • css中设置div居中显示的方法

    我们进行页面开发的时候,最经常用的就是div标签了,那么div中的内容如何居中显示呢,下面小编给大家分享一下. 操作方法 01 首先我们用sublime先创建一个html,并且在html里面加入div ...

  • div+css经典布局教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  • css怎样设置div背景色渐变

    Css设置 div渐变背景可以让网页看起来更有层次感,那么css怎样设置 div背景颜色渐变呢?今天小编我就来分享一下 css渐变背景的方法. 操作方法 01 举个例子,既然是要设置div渐变,所以我 ...

  • FrontPage2003中网页布局功能的应用

    很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能. 用FrontPage2003的"布局表格和单元格"功能布局网页时,需要通过两 ...

  • Word2010过滤网页上的超链接和图片方法

    我们时常会在某些网站上找一些自己想要的资料,但是许多网站上都有各种各样的格式、超链接、图片等,复制到Word里面后你会发现连同这些样式全部都粘贴到文档里面了。我们要的纯文本形式的,如果手工去除这些样式 ...