关于div的居中的问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期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的居中的问题的更多相关文章
- 左边图标右边文字,在div里居中
 - 绝对定位的DIV绝对居中显示
		
绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
 - HTML5:footer定位(底部+居中)的探讨+div图片居中问题
		
初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...
 - 用CSS让DIV上下左右居中的方法
		
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
 - div居中与div内容居中,不一样
		
1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...
 - css 如何使图片与文字在div中居中展示?
		
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
 - jQuery实现的浮动层div浏览器居中显示效果
		
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...
 - css:子元素div 上下左右居中方法总结
		
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
 - img在div中居中的问题
		
Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过 ...
 - css div上下左右居中
		
相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设 content 要在f里上下左右居中 <div class= ...
 
随机推荐
- 【转】RTSP实例解析
			
原文网址:http://www.cnblogs.com/qq78292959/archive/2010/08/12/2077039.html. 核心提示:rtsp简介(ZT) Real Time St ...
 - js细节
			
1.小心函数中的“s“ getElementsByTagName:得到的是数组 getElementById:得到的是对象 2.js 中设置哪一项被选中 subject.selectedIndex = ...
 - 折腾了半天,终于搞定了apache的rewrite功能
			
基本步骤和网上其它文章说得基本一样.只是在具体操作的时候或多或少存在些问题 一 打开 apache 的配置文件 httpd.conf . 二 将#loadmodule rewrite_module m ...
 - 利用命令控制台cmd进入某个硬盘的某个文件夹的命令是什么?
			
在命令行窗口中输入F:后回车就可以切换到F盘,如果想查看F盘的内容,可以再输入dir后回车 (输入“F”后要再输入一个“ :”再回车才行哦)
 - 15、NFC技术:使用Android Beam技术传输文件
			
传输文件的API 从Android4.1开始,NfcAdapter类增加了如下两个推送数据的方法. NfcAdapter.setBeamPushUris NfcAdapter.setBeamPushU ...
 - AFNetWorking 使用记录
			
1.从一个URL GET数据 方法1: NSURL * url = [NSURL URLWithString:@"http://www.weather.com.cn/data/sk/101 ...
 - php获取上传多个文件缺失
			
我们的一个页面编辑发布后台出现了图片无法上传保存的情况,经过调试对比发现,原来是file表单数量过多导致,减少file表单的数量即可上传成功.为了满足需求不减少file表单数并保证上传成功,于是更改了 ...
 - AI线性图标教程-转起
 - Best Practices for Speeding Up Your Web Site
			
The Exceptional Performance team has identified a number of best practices for making web pages fast ...
 - 浅谈w3c标准
			
#浅谈w3c标准 ##w3c标准是什么 w3c标准包括多个方面,官方是从应用角度分的,相关的文档可以戳[这里](http://www.w3.org/standards/).如果从WEB技术角度,可以分 ...