(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-01-11)

div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。

1. div水平居中:设置margin的左右边距为自动。

 div2 {3     margin:0 auto;4 }

2.   div中的元素居中

2.1 div中的文字居中:将div的行高设置跟其高度一样的值。

 div2 {3    height:200px;4    line-height:200px;5 }

2.2 div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居中

div 2 { 3    width: 200px; 4    height: 200px; 5    line-height: 200px; 6    vertical-align: middle; 7     8 } 9 div i10 {11    vertical-align: middle;12 }

2.3 div中的图片居中,方法二:将div转换成tablecell,让后设置vertical-align属性居中。

div2 {3    width: 200px;4    height: 200px;5    display: table-cell;6    vertical-align: middle;7    background-color: Gray;8 }

关于div的居中的问题的更多相关文章

  1. 左边图标右边文字,在div里居中

  2. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  3. HTML5:footer定位(底部+居中)的探讨+div图片居中问题

    初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...

  4. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  5. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...

  6. css 如何使图片与文字在div中居中展示?

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  7. jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...

  8. css:子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  9. img在div中居中的问题

    Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过 ...

  10. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class= ...

随机推荐

  1. K2 Blackpearl开发技术要点(Part2)

    转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685282.html K2 Blackpearl开发技术要点(Part2)  

  2. css实现鼠标经过导航文字偏位效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. C#-gdi绘图,双缓冲绘图,Paint事件的触发

    一. 画面闪烁问题与双缓冲技术 1.1 导致画面闪烁的关键原因分析: 1  绘制窗口由于大小位置状态改变进行重绘操作时 绘图窗口内容或大小每改变一次,都要调用Paint事件进行重绘操作,该操作会使画面 ...

  4. 在Eclipse中用TODO标签管理任务

    在Eclipse中用TODO标签管理任务 Elipse为Java项目的时候,有一个很人性化的“任务管理”功能,利用这个功能可以方便地将项目中一些需要处理的任务记录下来.先来看看“任务管理”是怎么使用的 ...

  5. 【转】从外行的视角尝试讲解为什么这回丰田栽了【全文完】【v1.01】

    转自:http://club.tgfcer.com/thread-6817371-1-1.html  [第一部分]背景简介 前几年闹得沸沸扬扬的丰田刹不住事件最近又有新进展.十月底俄克拉荷马的一次庭审 ...

  6. jquery的一些技巧总结

    1.使用方法在需要使用JQuery的页面中引入JQuery的js文件即可.例如:<script type="text/javascript" src="js/jqu ...

  7. C# 类和结构

    类和结构实际上都是创建对象的模板,每个对象都包含数据,并提供了处理和访问数据的方法 . 类定义了类的每个对象(称为实例)可以包含什么数据和功能. 例如,如 果一个类表示一个顾客,就可以定义字段 Cus ...

  8. 初识-----基于Socket的UDP和TCP编程及测试代码

    一.概述 TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. TCP:传输控制协议,一种面向连接的协议,给用户进程提供可靠的全双工的字节流 ...

  9. 在logopond中看到的优秀设计随想

    本随笔仅仅只是自己对于设计作品的想法,不喜勿喷~ 昨日看到关于大神配色的文章,决定在logopond网站中看看优秀的作品,以为自己的配色找找灵感,学习学习,对自己有很强的震撼力的有: 以女性高跟性的抽 ...

  10. 何时使用hadoop fs、hadoop dfs与hdfs dfs命令

    hadoop fs:使用面最广,可以操作任何文件系统. hadoop dfs与hdfs dfs:只能操作HDFS文件系统相关(包括与Local FS间的操作),前者已经Deprecated,一般使用后 ...