未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在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中垂直居中的更多相关文章
- 不定宽高的文字在div中垂直居中
本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main"> <div id=&qu ...
- 设置文字在div中垂直居中,使用line-height
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...
- css 如何使图片与文字在div中居中展示?
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- Css文字在div中自动换行
Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- 一个未知宽高的元素在div中垂直水平居中
<body> <div id="#div1"> <img src="img1.png"></img> </ ...
- 设置span在div中垂直居中
转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...
随机推荐
- DevExpress v18.1新版亮点——WinForms篇(八)
用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress WinForms v18.1 的新功能,快来下载试用新版本! ...
- 添加MyEclipse WebSphere Portal Server支持(二)
MyEclipse个人授权 折扣低至冰点!立即开抢>> [MyEclipse最新版下载] 三.支持WebSphere Portal部署 当您为WebSphere Portal 7.0或8. ...
- 《JAVA----day01和day02》
1,(在有符号的情况下)若一个二进制数都是1,则对应的十进制数是-1 2,在定义数值类型时,若无特别说明,整数默认:int 小数默认:double 在内存中 占字节数 取值范围 (1)byte:1个 ...
- jquery中使用jsonp
1 .关于jsonp的原理等,请看下面的文章,说的很明白. http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery. ...
- TreeView添加treeView1_NodeMouseClick----多么痛的领悟。。。
TreeView添加treeView1_NodeMouseClick----多么痛的领悟... 1首先说一点,通过参考代码,已经实现了菜单项自动添加到TreeView控件的树视图了. 2.在移植(菜单 ...
- 一款经典的 jQuery Lightbox 灯箱效果
一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...
- 单项目实现vendor分离编译,增加编译效率(vue-cli)
1.在build文件夹下添加文件:webpack.dll.config.js const path = require('path') const webpack = require('webpack ...
- PNotes – 目前最优秀的桌面便签软件 - imsoft.cnblogs
Pnotes: 下载链接: http://pan.baidu.com/s/1o6FK4SM 密码: n7il 便携版,包含中文语音包,包含十几种合适的皮肤. 更多信息:小众软件 http://www. ...
- 如何用移动硬盘安装win7 系统
身边没有U盘和光盘,就只有一个移动硬盘.移动硬盘安装系统是怎么进行的.在这里小毛孩来给大家上一课. 前期准备: 1.移动硬盘. 2.win7 32位的操作系统(*.iso). 3.有系统且可开机的电脑 ...
- day25 python学习 继承,钻石继承
通过一个列子认识父类和子类中,子类的如何实现对父类默认属性调用,同时拥有自己的属性,如何在子类中调用父类的方法,class Ainmal: country='afdas' def __init__(s ...