图片与文字在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)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
随机推荐
- java之集合类框架的简要知识点:泛型的类型擦除
这里想说一下在集合框架前需要理解的小知识点,也是个人的肤浅理解,不知道理解的正不正确,请大家多多指教.这里必须谈一下java的泛型,因为它们联系紧密,我们先看一下这几行代码: Class c1 = n ...
- 用记事本编写C#程序并运行C#代码
net framework自带有C#编译器 csc.exe,用它就好了 它在.NET框架目录下的<\Microsoft.NET\Framework\v**** (*号内容与版本有关) 不行你直接 ...
- VC++深入详解读书笔记-第七章对话框
1.在MFC中,所有的控件类都是由CWnd类派生来的,因此,控件实际上也是窗口. 2. 3.对话框的种类 模态对话框 模态对话框是指当其显示时,程序会暂时执行,直到关闭这个模态对话框后,才能继续执行程 ...
- mysql的分页存储过程,能够传出总记录数
最近用mysql + asp.net来写网站,既然mysql已经支持存储过程了,那么像分页这么常用的东西,当然要用存储过程啦 不过在网上找了一些,发现都有一个特点——就是不能传出总记录数,干脆自己研究 ...
- 【转】mysql行列转换方法总结
转:http://blog.chinaunix.net/uid-7692530-id-2567582.html 在某些数据库中有交叉表,但在MySQL中却没有这个功能,但网上看到有不少朋友想找出一个解 ...
- plsql基本语法(
1. 定义常量的语法格式 常量名 constant 类型标识符 [not null]:=值; 常量,包括后面的变量名都必须以字母开头,不能有空格,不能超过30个字符长度,同时不能和保留字同 ...
- php.ini 全站,和htaccess web目录 默认头部和尾部 auto_prepend_file
php.ini ; Automatically add files before PHP document. ; http://php.net/auto-prepend-file auto_prepe ...
- Oracle EBS-SQL (BOM-18):检查BOM与工艺路线对照.sql
/*有工艺路线,无BOM清单*/ select msi.segment1, msi.description from apps.BOM_OPERATIONAL_ROUTINGS bor, apps.m ...
- 【LeetCode练习题】Copy List with Random Pointer
Copy List with Random Pointer A linked list is given such that each node contains an additional rand ...
- bzoj 维护序列seq(双标记线段树)
Seq 维护序列seq Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 4184 Solved: 1518[Submit][Status][Discus ...