第一种方法,利用盒布局实现

 
<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里实现垂直水平都居中的更多相关文章

  1. 让一个小Div(子)在大Div(父)中垂直水平都居中

    方法1: .parent {          width:800px;          height:500px;          border:2px solid #000;          ...

  2. css 如何使图片与文字在div中居中展示?

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  3. 实现图标Icon+文字在div里自动中心居中(水平垂直居中)

    已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...

  4. 拖拽图片到另一个div里

    HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. 如何让一个DIV水平,垂直方向都居中于浏览器?

    <style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...

  6. CSS垂直水平完全居中手册

    水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...

  7. 实现CSS样式垂直水平完全居中

    1.水平居中 a.内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } b.块级 ...

  8. 如何将一个div盒子水平垂直都居中?

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  9. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

随机推荐

  1. SQL server 2008数据库的备份与还原、分离(转)

    SQL server 2008数据库的备份与还原.分离(转)   一.SQL数据库的备份: 1.依次打开 开始菜单 → 程序 → Microsoft SQL Server 2008 → SQL Ser ...

  2. Oracle 10G 使用UTL_SMTP发送中文电子邮件[Z]

    CREATE OR REPLACE PROCEDURE SCOTT.HTML_EMAIL( P_TO IN VARCHAR2, --收件人地址 P_SUBJECT IN VARCHAR2, --邮件主 ...

  3. c#datagrid的每行的单击事件

    需要一个帮助类 using System; using System.Net; using System.Windows; using System.Windows.Controls; using S ...

  4. Android listview 的应用

    ListView作为Android最常用但是却最难用的控件之一,有很多神奇的用法.我之前也有写过一个例子,稍微不那么简单了一点. [Android原生item的伸缩效果]:http://www.cnb ...

  5. yii中使用active record进行关联显示

    model中: view中:

  6. java学习一目了然——File类文件处理

    java学习一目了然--File类文件处理 File类(java.io.File) 构造函数: File(String path) File(String parent,String child) F ...

  7. PHP配置xdebug

    其实已经做PHP超过2年了,但是今天特别有感触,所以把过程写在这里 环境是win7+apache2.2+php5.3,因为某种原因,必须使用这个版本. 然后就死活配置不出来.apache日志如下: [ ...

  8. PM产品经理练级攻略(1-5等级)

    大家都叫“PM”,但做的事情却完全不同? “PM”这个词到底是什么意思? 这个话题恐怕也是各位同行都一直在想,也一直想不清楚的吧,我也是. 每次看到各种“产品经理的能力模型”,我都觉得有点扯淡,总觉得 ...

  9. SonarQube代码质量管理平台工具

    1.Sonar轮廓介绍 Sonar (SonarQube)是一个开源平台,用于管理源代码的质量.Sonar 不只是一个质量数据报告工具,更是代码质量管理平台.支持的语言包括:Java.PHP.C#.C ...

  10. 电子科大POJ "整数的千位分隔"

    整数的千位分隔 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) C-source ...