今天工作中遇到一个问题,就是未知行数的文字在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. DevExpress v18.1新版亮点——ASP.NET篇(三)

    用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress ASP.NET v18.1 的新功能,快来下载试用新版本!点 ...

  2. DevExpress v17.2最新版帮助文档下载大全

    DevExpress v17.2.4帮助文档下载列表大全来啦!包含.NET.VCL.HTML/JS系列所有帮助文档,提供CHM和PDF两个版本.除已停止更新的Silverlight.Windows 8 ...

  3. JQ延迟对象

    延迟对象初识 技术一般水平有限,有什么错的地方,望大家指正. ES6已经实现了延迟对象Promise,但是今天主角是JQ里面的延迟对象,套路其实都是差不多的.下面先看一个比较牵强的例子: <bu ...

  4. 0121 集合类 ArrayList 的练习

    集合接口的常用方法: 1.List接口 public class Jihe { public static void main(String[] args) { ArrayList<String ...

  5. Grunt新手入门篇

    今天看到一篇通俗易懂的Grunt入门文章,博主写得很用心,原文请戳:http://yujiangshui.com/grunt-basic-tutorial/ 当时学习 Grunt 的时候,真是很头疼. ...

  6. X11 fluxbox窗口管理器

    /********************************************************************************* * X11 fluxbox窗口管理 ...

  7. windows下perl的安装和脚本的运行

    参考 1.windows下perl的安装和脚本的运行: 2.fddb测试fddb的评估方法: 3.gunplot5.2.4-download: 完

  8. (dfs痕迹清理兄弟篇)bfs作用效果的后效性

    dfs通过递归将每种情景分割在不同的时空,但需要对每种情况对后续时空造成的痕迹进行清理(这是对全局变量而言的,对形式变量不需要清理(因为已经被分割在不同时空)) bfs由于不是利用递归则不能分割不同的 ...

  9. element组件知识点总结

    1:单选框与多选框的change事件,html代码 <div id="app"> <div class="demo box"> < ...

  10. GStreamer插件分类

    gst-plugins-base一套小而固定的插件,涵盖各种可能类型的elements; 这些在开发系列期间随着核心变化而不断更新.我们相信分销商可以安全地发行这些插件.人们编写插件应该将他们的代码基 ...