单行文字 （外行高度固定）

line-height 行高，
将line-height值与外部标签盒子的高度值设置成一致就可以了。
height:3em; line-height:3em;

多行文字

图文结合（图和单行文字）

图文结合（图和多行文字）

相对定位＋绝对定位，外层盒子设置position:relative，内层图片设置position:absolute

css中的垂直居中方法的更多相关文章

  1. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  2. css 中 div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

  4. css中div垂直居中的方法。

    利用绝对定位实现的居中 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  5. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  6. CSS中各种各样居中方法的总结

    在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...

  7. CSS中盒子垂直居中的常用方法

    在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面 ...

  8. css中vertical-align垂直居中的认识

    目标大纲 1.vertical-align为何不起作用?? vertical-align只钟情于“inline-block内联块级元素/inline元素” vertical-align属性 text- ...

  9. CSS中颜色表示方法及颜色表

    一:直接用颜色的英文名表示 二:RGB(x,y,z)函数表示,x.y.z.分别是红色.绿色.蓝色的值,x,y,z∈[0,225],亦可用百分比表示:对比rgba(x,y,z,a)中a是alpha通道设 ...

随机推荐

  1. TCP/IP-TCP

    Don't cry over spilt milk. "覆水难收" 参考资料:TCP/IP入门经典 (第五版)  TCP/IP详解 卷一:协议 TCP是协议栈中非常重要的一个部分, ...

  2. (转)你知道Android也有安全模式吗？(地球人都知道了吧)

    使用PC时,我们习惯在安全模式下解决驱动的各种兼容性问题.而你是否又知道,Android手机同样存在安全模式,帮你解决APP的各种冲突问题. 很多Android手机用户都遇到过下面这种极端情况:因为第 ...

  3. 按钮制作技巧（css精灵效果）-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  4. InstallShield安装包中集成第三方安装包的方案选择[转]

      我们在制作安装包时,有些情况下会涉及第三方安装的集成,这里将讨论如何调用安装第三方包,以及需要注意的事项. 第三方安装包的介质类型有很多,主要有:单独的一个Setup.exe,单独的一个msi包, ...

  5. getUrlParam，jQuery中的URL参数获取

    大家经常会需要在一段URL中截取到自己所需参数的值,下面的方法也许能帮到您: $.getUrlParam = function(name){ var reg = new RegExp("(^ ...

  6. php设计模式之单例模式

    单例模式顾名思义,就是只有一个实例.作为对象的创建模式, 单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式的要点有三个: 一是某个类只能有一个实例: 二是它必须自行 ...

  7. MongoDB-固定集合 capped collection 操作 介绍

    固定集合:capped collection 是性能出色的固定大小的集合,以LRU算法淘汰记录,自助维护集合中的对象的插入顺序,创建时预先制定大小,空间使用完,心对象取代旧的对象,保持最新的数据. 可 ...

  8. python运维开发之第十天

    一.多进程 1.进程模块 multiprocessing 简单的创建一个进程 #!/usr/bin/env python # -*- coding: utf- -*- # @Author : Will ...

  9. Gnuradio 学习

    8月份就把usrp买过来了,不过由于一直比较忙, 也没怎么弄. 这几天准备学习学习,暂时也不知道能干些啥.不管怎么样先按教程走一遍,熟悉熟悉设备也是好的吧. 首先去Ettus 下载了一个官方指导,一步 ...

  10. Django models通过DateTimeField保存到MySQL的时间的时区问题

    最近开始使用Django开发一些系统,在models.py中设置一些数据库表结构并给日期时间字段赋初值,不过在使用的过程中,遇到一点问题.问题是,我本来服务器使用的市区是“Asia/Shanghai” ...