图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现
<style type="text/css">/*盒布局实现图片与文字水平垂直居中*/
.div1{
width: 100%;
height:100px;
background: yellowgreen;
display:-moz-box;
-moz-box-align:center;
-moz-box-pack:center;
}
</style> <div class="div1">
<img src="xmpho-tag.png" style="vertical-align: middle">
<span>盒布局实现图片与文字水平垂直居中</span>
</div>

第二种,非盒布局实现
<style type="text/css">
.div2{
width: 100%;
height:100px;
background: yellowgreen;
text-align: center;
line-height: 100px;
}
</style> <div class="div2">
<img src="xmpho-tag.png" style="vertical-align: middle">
<span>非盒布局实现图片与文字水平垂直居中</span>
</div>

图片与文字在div里实现垂直水平都居中的更多相关文章
- 让一个小Div(子)在大Div(父)中垂直水平都居中
		
方法1: .parent { width:800px; height:500px; border:2px solid #000; ...
 - css 如何使图片与文字在div中居中展示?
		
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
 - 实现图标Icon+文字在div里自动中心居中(水平垂直居中)
		
已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...
 - 拖拽图片到另一个div里
		
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
 - 如何让一个DIV水平,垂直方向都居中于浏览器?
		
<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...
 - CSS垂直水平完全居中手册
		
水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...
 - 实现CSS样式垂直水平完全居中
		
1.水平居中 a.内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } b.块级 ...
 - 如何将一个div盒子水平垂直都居中?
		
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
 - DIV+CSS 让同一行的图片和文字对齐【转藏】
		
DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
 
随机推荐
- 封装一些数据库SQLCipher的方法(增、删、改、查)
			
上一篇随笔只是简单的说了一下使用SQLCipher框架,介绍的比较笼统,可能看一遍之后更加蒙圈了,为了更好的使用这个数据库,整理了我在公司项目的需要用的方法,包括创建表,插入数据,更新数据,搜索查询数 ...
 - 沼跃鱼早已看穿了一切   C/C++
			
沼跃鱼早已看穿了一切 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 593 Solved: 229[Submit][Status][Web Boa ...
 - tomcat组成及原理[转]
			
Tomcat安装好后打开目录;可以看到如下结构: bin :存放服务器脚本; conf :存放配置文件; lib :存放需要的JAR文件; wabapps :存放需要发布的Web应用程序及其部署文件; ...
 - [Linux]Service mysql start出错(mysql: unrecognized service)解决方法
			
service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [hitony ~]# service mysql star ...
 - mutex 和 spinlock 对比
			
理论上: mutex和spinlock都是用于多进程/线程间访问公共资源时保持同步用的,只 是在lock失败的时候处理方式有所不同.首先,当一个thread 给一个mutex上锁失败的时候,threa ...
 - [转]在ITunes播放中前进、后退五秒的快捷键
			
在ITunes播放中前进.后退五秒的快捷键 如题,快捷键为Command+Alt+方向键.听Podcast一两句没听清楚的时候很有用. reference: http://mac.pcbeta.com ...
 - 并发(Concurrency)和并行(Parallelism)的区别
			
最近在读<real world haskell>里关于并行的一章时,看到作者首先对并发(Concurrency)和并行(Parallelism)的区别进行了定义和解释.以前我对这个问题也是 ...
 - iOS 开发者必知的 75 个工具
			
你可以从软件开发者如何使用工具中看出他水准如何.有经验的开发者精于使用工具.对你目前所使用的工具不断研究,同时了解一些替代品的使用,当你目前所用的工具无法满足你的需要时可以填补空缺. 记住了这些,我将 ...
 - Ubuntu 12.04安装NFS server
			
首先安装nfs-kernel-server apt-get install nfs-kernel-server 然后创建一个目录: mkdir -p /opt/share 并赋予权限777: chmo ...
 - 轻松配置java开发环境
			
1.下载java开发常用的IDE(Integrated Development Environment)--eclipse.http://www.eclipse.org/downloads/ 2.下载 ...