当前位置:  编程技术>WEB前端

CSS如何使DIV层居中

    来源: 互联网  发布时间:2014-09-06

    本文导语:  如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中...

如何使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(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"

效果如下:

如何使文本在DIV中垂直居中
如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:




body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}



test content




说明:

vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。


    
 
 

您可能感兴趣的文章:

  • 用css实现图片垂直居中的使用技巧
  • 在IE与FF中如何居中的css写法
  • css布局网页水平居中常用方法
  • css支持标准的图片垂直居中
  • 纯CSS实现上下左右都居中的代码
  • CSS网页布局入门教程3:一列固定宽度居中
  • CSS解决未知高度垂直居中的问题
  • CSS网页布局入门教程7:二列固定宽度居中
  • css实现文字垂直居中的代码第1/2页
  • CSS解决未知高度垂直居中
  • 一个自动居中的导航条实例与相关问题 DIV+CSS
  • CSS List Grid Layout 图片垂直居中
  • 在div中使用css让文字底部对齐的方法
  • DIV+CSS不一定符合标准
  • DIV+CSS 英文命名规范
  • div+css与xhtml+css分别是什么意思?
  • div+css如何实现页脚的置底
  • CSS顶级技巧大放送,div+css布局必知
  • CSS技巧DIV为空时占据空间的解决办法
  • CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
  • div+css在思路和流程上实现结构与表现的分离分析
  • 研究了一下div+css的高度自适应问题
  • div+css中Class与ID的区别
  • DIV CSS网页布局 最小高度(min-height)的妙用
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • div+css布局必须要知道的css条件注释理论及实践第1/2页
  • 非常漂亮的Div+CSS布局入门教程第1/5页
  • div+CSS网页布局的意义与副作用原因小结第1/2页
  • DIV+CSS布局教程大全与pdf电子书 下载
  • div+css模拟表格效果代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3