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

 
<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. FtpClient的使用

    摘自:http://hi.baidu.com/yuanhotel/item/000b6334894d11f42784f4da Java的ftp操作 package com.why.ftp; impor ...

  2. hbase 二级索引创建

    在单机上运行hbase 二级索引: import java.io.IOException; import java.util.HashMap; import java.util.Map; import ...

  3. 深入理解JavaWeb技术内幕(一)

    最近在看许令波的<深入理解JavaWeb技术内幕>.整理了一些笔记.想做一个系列,这篇是系列的第一篇,讲Web请求. B/S架构 最常见的架构方式. 优点: 1.客户端使用统一(此处的统一 ...

  4. Python学习笔记(六)Python的列表生成式、生成器

    列表生成式 List Comprehensions 列表生成式是Python内置的非常简单却强大的可以用来创建list的生成式. 简单的数值范围的list可以使用一下方式生成: >>> ...

  5. LaTeX中titlesec宏包的使用

    在 xelatex 中使用 \usepackage 指令使用 titlesec 宏包时,可以指定一些格式选项,如下: \usepackage[center]{titlesec} 其中 center 可 ...

  6. UVA 1839 Alignment

    还是最长上升子序列... 本题是求队列中任一士兵都能从左边或者右边看到队伍外: 即某一士兵左边为上升子序列,右边为下降子序列.求两个序列和,再用总数减去: #include <iostream& ...

  7. android TextView 垂直滚动 用动画实现

    项目中需要让TextView 滚动一会显示一行一会显示一行 想了下用移动动画实现.但是实际中在整这个动画时调了好久.主要用到的动画方式是移动动画:TranslateAnimation 代码: PS: ...

  8. safari的input问题

    切图网用户体验团队QUX在手机移动触屏web前端开发中碰到一个问题 — 纯css3定义的按钮在android安卓系统下显示正常,但是在苹果ios系统下,以ipad为例,ipad下呈现渐变和圆角状态 . ...

  9. GridView 导出Excel

    protected void btnExcel_Click(object sender, EventArgs e) { ) { ExportGridViewForUTF8(GridView1, Dat ...

  10. MEMS微加工技术

    MEMS的微加工有两种方法,一种是多层平面加工技术,还有一种是基于SOI的体加工技术. (一)多层平面加工技术 这种方法加工出来的结构有三层:作为主体的多晶硅层.作为暂时填充物的氧化物牺牲层以及多晶硅 ...