今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图:

图1
图2
图3

  图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,html代码如下:(经测试,除了IE7,其他浏览器都成功的垂直居中了)

<div class="m"><div class="m1"><div class="m2">南京证券股份业部份业部</div></div></div>

.m { height:40px; line-height:18px; padding-left:20px; font-size:14px; font-weight:bold; color:#333333; margin:5px 0; background:url(../images/gsBg.png) no-repeat 0 0; display:table; _position:relative;}
.m1 { vertical-align:middle; display:table-cell; _position: absolute; _top:50%;}
.m2 { _position:relative; _top:-50%;}

  后面一篇文章是我转载的一篇参考资料。

未知行数的文字在div中垂直居中的更多相关文章

  1. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  2. 设置文字在div中垂直居中,使用line-height

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...

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

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

  4. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  5. Css文字在div中自动换行

    Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行

  6. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  7. 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  8. 一个未知宽高的元素在div中垂直水平居中

    <body> <div id="#div1"> <img src="img1.png"></img> </ ...

  9. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

随机推荐

  1. UI基础:UINavigationController、界面通信

    UINavigationControlle UINavigationController:导航控制器,是iOS中最常用的多视图控制器之一,它用来管理多个视图控制器.也称为多视图控制器. 导航控制器可以 ...

  2. C语言指针使用小记 (深入理解C指针 读后小记)

    最近正值过年在家,新年初一,闲暇时间无事可做便把以前看过的书籍整理了一下,顺手也把这本“深入理解C指针”的书重新读了一遍,这本书总体感觉比较简单,但是还是不免有些地方是平时没有想到过或者没有注意到的, ...

  3. Linux:rm:du命令

    RM 删除选项rm -r 递归删除,删除目录下所有 删除当前文件下所有文件呢? rm -rf * rm -f 忽略删除提醒 万千从中找到文件删除 ls |grep abc |xargs rm -f 保 ...

  4. BZOJ4897: [Thu Summer Camp2016]成绩单【DP of DP】

    Description 期末考试结束了,班主任L老师要将成绩单分发到每位同学手中.L老师共有n份成绩单,按照编号从1到n的顺序叠 放在桌子上,其中编号为i的成绩单分数为w_i.成绩单是按照批次发放的. ...

  5. 大家一起做训练 第二场 E Cottage Village

    题目来源:CodeForce #15 A 现在有 n 间正方形的房子,其中心点分布在 X轴 上,现在我需要新建一间边长为 t 的房子,要求新房子至少和一间房子相邻,但是不能和其他房子重合.请输出我有多 ...

  6. 杭电OJ1789、南阳OJ236(贪心法)解题报告

    杭电OJ1789http://acm.hdu.edu.cn/showproblem.php?pid=1789 南阳OJ236http://59.69.128.203/JudgeOnline/probl ...

  7. 【spring源码分析】面向切面编程架构设计

    2 注解说明 2.1 @Aspect 作用是把当前类标识为一个切面供容器读取 2.2 @Before标识一个前置增强方法,相当于BeforeAdvice的功能,相似功能的还有 2.3 @AfterRe ...

  8. LG3684 [CERC2016]机棚障碍 Hangar Hurdles

    题意 题目描述 你正在评估一些关于一个巨型飞机仓库的建设计划.飞机仓库的地面可以表示为n行n列的网格图,其中每个格子要么是空的,要么有障碍物.行从上到下依次被编号为1到n,列从左到右依次被编号为1到n ...

  9. Android和Linux下设备节点的创建笔记

    1. Linux kernel创建的/dev/下的设备节点是不对的, 其实是kernel仅负责在/sys/(基于内存的虚拟文件系统)创建一大堆下目录和文件,而真正的设备节点是在用户空间程序创建的,应该 ...

  10. 使用npm init快速创建web 应用

    一般来说我们会有npm init -y 快速生成package.json 文件, 但是npm init 可以使用脚手架工具,生成项目,比较方便 参考 npm init 帮助命令 npm init [- ...