• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 如何使div垂直水平居中的css代码

如何使div垂直水平居中的css代码

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含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_194×79.gif) #FFF no-repeat center;
}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者”bottom right”等,也可以直接写数值”50 30″
效果如下:
如何使文本在DIV中垂直居中
如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:

这样IE下也居中了,但是它带来一个新的问题,你发现你的页面中所有文字都是居中的,这样很不好看。这个就很容易解决了,只需要在你的DIV定义中加上 text-align: left; 之类调整的设置就行了。

您可能想查找下面的文章:

  • css小技巧
  • DIV 自动滚动功能及滚动条颜色修改的代码
  • CSS控制div宽度最大宽度/高度和最小宽度/高度的方法
  • 解决img在div中居中的问题
  • 设置一个DIV块固定在屏幕中央的两种方法(推荐)
  • 使用CSS的overflow属性防止float撑开div的方法
  • CSS文本和div垂直居中方法总结
  • 使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
  • html+css+div实现电影结束效果
  • 不固定宽度和高度的情况下CSS调整div居中的方法总结

相关文章

  • 2017-08-06Discuz7.2 IE9兼容性写法 杜工完全修补方案
  • 2017-08-06CSS3实现的炫酷菜单代码分享
  • 2017-08-06CSS实现横向粒子变动加载动画
  • 2017-08-06CSS控制文字换行、裁剪
  • 2017-08-06纯css 实现footer 一直在页面底部,不随页面滚动
  • 2017-08-06CSS自定义select下拉选择框的样式(不用其他标签模拟)
  • 2017-08-06display:table-cell实现兼容性的两栏自适应布局实现代码
  • 2017-08-06IE兼容css3圆角的实现代码
  • 2017-08-06css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程
  • 2017-08-06cursor:hand与cursor:pointer的区别介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 大图片根据分辨率自适应宽度仍居中显示
    • CSS设置DIV Herf底层图片和链接同时改变(兼容多浏览器)
    • 纯css实现的下拉菜单只有边框底纹用到图片
    • 填写表单的时候如何实现输入框里面字母大写转小写
    • 浅谈CSS块级元素与行内元素(内联元素)的区别和联系
    • CSS3感应鼠标的背景闪烁和图片缩放动画效果
    • 一个关于css中margin-right没有效果的问题
    • 浅谈CSS字体的加载加速问题
    • 浅谈Span和Div的区别
    • IE下target获得焦点时产生虚线问题的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有