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

 
<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. 获得创建临时表的session id

    通过sql server的default trace和tempdb中的sys.objects视图,你能够获得创建临时表的session id,下面是相应的sql语句: DECLARE @FileNam ...

  2. linux学习笔记之套接字

    一.基础知识. 1:套接字基础. 1,是通信端点的抽象. 2,在UNIX类系统中被当作是一种文件描述符. 3,套接字通信域. 域 描述 AF_INET IPV4因特网域 AF_INET6 IPV6因特 ...

  3. avalon中常用的事件

     ms-on-change 相当于失去焦点事件. ms-on-input 相当于watch事件 http://www.runoob.com/jsref/event-oninput.html

  4. JQ兼容各种JS库的写法

    来自为知笔记(Wiz)

  5. 碰到这个SB错误,'Taglist: Exuberant ctags (http://ctags.sf.net) not found in PATH. Plugin is not loaded.点办

    After launching MacVim you may get this annoying error message:'Taglist: Exuberant ctags (http://cta ...

  6. Holding Bin-Laden Captive!(hdoj1085)代码并未完全看懂

    We all know that Bin-Laden is a notorious terrorist, and he has disappeared for a long time. But rec ...

  7. Spring中的DataBinding(二) - Validation

    @Controller@RequestMapping(value = "/custom/register")public class RegistrationController ...

  8. MDX基础

    第一章 看了本书的第一章,总体一个印象,废话真多.话不多说:整理书中知识点,实践出真理! 知识点:MDX语法:简单的函数介绍; 首先语法网上流传的很多,读者应该具备cube(多维数据集)的知识基础,我 ...

  9. Dependency Walker使用说明

    Dependency Walker使用说明 标签: dllexewindowsvbqq工具 2010-03-29 11:10 25175人阅读 评论(22) 收藏 举报  分类: 基本常识(45)  ...

  10. DBS小结

    <数据库系统原理>主要介绍的是数据库技术的基本原理.方法和应用技术. 它可以使我们能有效地使用现有的数据库管理系统和软件开发工具,掌握数据库结构的设计和数据库应用系统的开发原理. 在这里, ...