图片与文字在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)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
随机推荐
- SQL-LINQ-Lambda 语法对照
SQL LINQ Lambda SELECT *FROM Employees from e in Employees select e Employees .Select (e => e) ...
- XPath语法 在C#中使用XPath示例
XPath可以快速定位到Xml中的节点或者属性.XPath语法很简单,但是强大够用,它也是使用xslt的基础知识. 示例Xml: <?xml version="1.0" en ...
- 用自动化运维工具解放IT运维
何谓自动化运维,即在最少的人工干预下,结合运用脚本与第三方工具,保证业务系统7*24小时高效稳定运行.这应该是所有业务系统运维终极目标. 我们对运维的要求通常是: 1.事前预警 在故障出现之前,管理人 ...
- 【搜索引擎Jediael开发4】V0.01完整代码
截止目前,已完成如下功能: 1.指定某个地址,使用HttpClient下载该网页至本地文件 2.使用HtmlParser解释第1步下载的网页,抽取其中包含的链接信息 3.下载第2步的所有链接指向的网页 ...
- 使用jquery插件uploadify上传文件的方法与疑问
我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做.最近在做一个小项目需要上传图片,而且是需要用ajax的方式.但是利用jquery的ajax方法总会有 ...
- 修改Windows系统的启动Shell
前提:当前系统中有可用的shell文件 方法: 修改当前用户的系统默认shell(只对当前用户生效,且优先于本机默认的shell) 修改“HKCU\SOFTWARE\Microsoft\Windo ...
- 模块化开发之sea.js实现原理总结
seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签 引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实 ...
- php 数组 (3) reset() end() count() current() key()
<?php /* count()统计数组中元素的个数 reset() 把数组内部指针移动到数组第一个元素,并返回元素值 end() 把数组内部指针移动到数组最后一个元素,并返回元素值 prev( ...
- mysql事件调度器功能
一.前言 自MySQL5.1.6起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务(例如:删除记录.对数据进行汇总等等),来取代原先只能由操作系 ...
- newifi升级固件及开启SSH
1.固件去官方社区下载 2.开启SSH 连接newifi访问http://192.168.99.1/newifi/ifiwen_hss.html 看到返回success 说明开启SSH 3.使用 ...