今天工作中遇到一个问题,就是未知行数的文字在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. VS2003在win7 64位的调试

    win7 64位下安装了VS2003 ,在调试时,一直加载不了W3P.解决方案是.打开VS时,右键已管理员身份打开,即可调试.

  2. java发生邮件(转)

    参考链接:http://www.runoob.com/java/java-sending-email.html package test.mail; import com.sun.mail.util. ...

  3. Bitdefender Internet Security 2013 – 免费3个月

    Bitdefender Internet Security 2013 – 免费3个月大约1分钟参加调查,申请3个月免费,缺陷是…要经过人工审核活动地址: 点此进入申请方法,最好用谷歌翻译(俄文)

  4. jenkins自动化打包部署

    请参考: http://m.blog.csdn.net/article/details?id=50518959 1.启动 jenkins.war ,打开首页  192.168.158.129:8080 ...

  5. isKindOfClass in cocos2d-x

    在最新版2.*的cocos2d-x中isKindOfClass可以用如下代码代替. 未验证,不过看了引擎代码是这样写的   原代码 [s1 isKindOfClass:[DestHole class] ...

  6. 构建你自己的论坛,基于windows服务器的xampp+discuz论坛

    首先声明,论坛的构建需要基于企业,并且基于企业注册,然后进行域名备案. 此处作为研究,先示例: 1. 安装 xampp 软件,百度搜索 然后在服务器安装,基本都是默认安装,然后出来. 安装完成后,接下 ...

  7. Linux下Bind error: Address already in use处理

    发生这种问题是由于端口被程序绑定而没有释放造成. 可以使用netstat -lp查询当前处于连接的程序以及对应的进程信息. 如果只想查看指定端口,可以输入netstat -lp | grep 9877 ...

  8. Gym - 101550A Artwork (并查集在线做法)

    题目链接 题意:给你一个n*m的网格图,初始时格点全白,每次可以将一段连续的格点涂黑.求出每次操作之后白色连通块的数量. 看了看网上的题解,基本全是离线的做法.其实这道题是有在线的做法的,利用了对偶图 ...

  9. Laravel学习之旅(二)

    控制器 一.怎么编写控制器? 1.控制器文件存放路径:app\Http\Controllers: 2.命名规范如:TestController.php 3.完整的控制器例子如下: <?php n ...

  10. c++hook全局触控事件

    https://gist.github.com/vbfox/1339671 namespace BlackFox { using System; using System.ComponentModel ...