今天工作中遇到一个问题,就是未知行数的文字在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. 序列化 NSKeyedArchiver,NSPropertyListSerialization

    到目前为止,看到oc实现的序列化方式有两种:NSKeyedArchiver,NSPropertyListSerialization. 在这两种序列化方式中,NSData都是序列化的目标.两种方式的不同 ...

  2. ModuleNotFoundError: No module named '_tkinter'

    https://blog.csdn.net/blueheart20/article/details/78763208 apt search python3-tk apt install python3 ...

  3. mysql 下载和 安装

    一.下载mysql 1. 在浏览器里打开mysql的官网http://www.mysql.com/ 2. 进入页面顶部的"Downloads" 3. 打开页面底部的“Communi ...

  4. css实现垂直居中的几种方法

    方法1.这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align 属性. #wrapper { //代表父元素 display: table; } #cell ...

  5. 2.2 linux中的信号分析

    信号: 信号是UNIX系统响应某些状况而产生的事件,进程在接收到信号时会采取相应的行动. 信号是因为某些错误条件而产生的,比如内存段冲突.浮点处理器错误或者非法指令等. 信号是在软件层次上对中断的一种 ...

  6. SIM800C Couldn't pair with xxx because of an incorrect PIN or passkey

    /******************************************************************************* * SIM800C Couldn't ...

  7. ODBC的基础架构

    *) 基本概念:1. 应用程序(Application)2. ODBC驱动管理器(ODBC Driver Manager) 负责管理应用程序和驱动程序间的通信,主要功能包括:解析DSN (数据源名称, ...

  8. 任务三 简单程序测试及 GitHub Issues 的使用

    我提交的Issue 我被提出的Issue 在使用Issue的过程中我发现提出的Issue不能指派任务人和问题类型,被提出的Issue可以. 碰到最多的问题是测试程序的过程中, 比如用户未按指定格式输入 ...

  9. .NET 之 垃圾回收机制GC

    一.GC的必要性 1.应用程序对资源操作,通常简单分为以下几个步骤:为对应的资源分配内存 → 初始化内存 → 使用资源 → 清理资源 → 释放内存. 2.应用程序对资源(内存使用)管理的方式,常见的一 ...

  10. hdu 5310(贪心)

    题意:要买n个纪念品,单价p元,有团购价 m个q元,问怎样买钱最少 这个是BC周年庆第一题,水题昂,小学数学题,就是看n个纪念品单买.总体买团购然后零头买单价的.全部买团购价的多买也无所谓的,然后直接 ...