今天工作中遇到一个问题,就是未知行数的文字在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. IOS语言总结

    本文主要介绍和C++不同的地方. 1.类的定义: 一个类有两个文件一个.h还有一个.m文件 #import <Foundation/Foundation.h> @interface MyC ...

  2. 安装mysql,mysql创建数据库,创建用户及为用户添加权限

    安装mysql a.下载源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm b.安装 rpm -ivh mysq ...

  3. C#如何提取.txt文件中的每个字符串

    C#如何提取.txt文件中的每个字符串,并将其存放到一个类中. 将其中的编号 菜名 价格 分别存入不同的数组中. 注:在用ReadLine读取一行信息时为什么读取的中文字符变成了乱码. 20 满意答案 ...

  4. 一个TED演讲背后的文化论

    0. 前言 写这个前言让我很难受,当然不是心情难受哈,此时的状态是很High的哦,大中午觉都省了, 说难受是我觉得我这语言文字太渣了,相比今天的主题确实很没“文化”.但我也很庆幸,能 看到这么个人认为 ...

  5. 3.3 shell控制流结构

    shell中的控制流包括if then else语句,case语句,for循环,until循环,while循环,break控制,continue控制. 条件测试: 有时判断字符串是否相等或检查文件状态 ...

  6. iOS-----使用NSURLConnection

    使用NSURLConnection 如果只是为了读取HTTP等服务器数据,或向服务器提交数据,iOS还提供了NSURLConnection类,NSURLConnection使用NSURLRequest ...

  7. springloaded hot deploy

    download springloaded jar file -Dfile.encoding=utf-8 -javaagent:e:\\libs\\springloaded-1.2.5.jar -no ...

  8. ubuntu16.04 下 NVIDIA GTX1050ti 显卡驱动 PPA安装

    本文参考资料链接: http://blog.csdn.net/10km/article/details/61191230 前几天在京东商城上花了6999元买了台笔记本(惠普(HP)暗影精灵II代Pro ...

  9. java.lang.IndexOutOfBoundsException: setSpan (35 ... 35) ends beyond length 28

    /************************************************************************************* * java.lang.I ...

  10. java设计模——反射的应用 (利用反射来去除if判断语句)

    利用反射来去除if判断语句 我的以前写的一个查分系统,就是部长让我写的那个,使用一个分发器(函数),他会根据传递进来的字符串参数调用不同的方. If(“add”.equalsIgnoreCase(fu ...