图片与文字在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)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
随机推荐
- (导航控制器view)全屏幕滑动实现pop效果
看到现在app 中越来越流行的手势滑动实现pop效果,心里很是痒痒跃跃欲试,经过多方查看资料,终于在简书上找到了详细的实现方案: 轻松学习之二——iOS利用Runtime自定义控制器POP手势动画 经 ...
- 敏捷软件开发之TDD(一)
测试驱动开发即TDD是敏捷软件开发方法的重要组成部分.TDD是从极限编程中发展而来,它既可以用在设计时也可以用在开发实践中.TDD把业务需求转化为可以运行的测试代码并具有如下的优点1.TDD从一开始就 ...
- Oprofile安装与使用探索
本文分别尝试了oprofile在x86平台和龙芯平台上的安装 一:oprofile的安装与配置(intel+ubuntu12.04) I. Oprofile 安装 Oprofile 包含在 Linux ...
- C/c++几个预定义的宏:__DATE__,__TIME__,__FILE__,__LINE__
一边情况下,C/C++编译器会内置几个宏,这些宏定义不仅可以帮助我们完成跨平台的源码编写,灵活使用也可以巧妙地帮我们输出非常有用的调试信息. ANSI C标准中有几个标准预定义宏(也是常用的): __ ...
- HTML 5 学习 (1)
一.HTML的发展 20世纪70年代~80年代之间HTML正式诞生,但是没有一个统一的标准,显示内容比较单一.在netscape上显示的网页可能在ie5中无法正常显示,反之亦然. 1998年,HTML ...
- zmodem协议的使用(SecureCRT)
SecureCRT可以使用zmodem协议来快速的传送文件,使用非常方便.对于Linux系统,大多数发行版本都自带有rz和sz命令.在SecureCRT中选择Options->Session O ...
- jQuery图片懒加载lazyload插件
http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ js 模板引擎
- Leetcode 242 Valid Anagram pytyhon
题目: Given two strings s and t, write a function to determine if t is an anagram of s. For example,s ...
- (转载)Eclipse基金会涉足物联网,M2M标准是否已获东风?
摘要:相信大部分的开发者都使用过Eclipse IDE,然而Eclipse基金会有的不只是集成开发环境,其托管的开源项目已达250余个.近日该基金会宣布启动物联网项目,旨在推动M2M标准的前行! Ec ...
- 21副GIF动图让你了解各种数学概念(转。太强大了)
“让我们面对它:总的来说数学是不容易的,但当你征服了问题,并达到新的理解高度,这就是它给你的回报.” ——Danica McKellar 数学是很难的科学,但因为它是科学家用数学来解释宇宙的语言,我们 ...