未知行数的文字在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中内容无论多少,都可以垂直居 ...
随机推荐
- 【令人振奋】【转】微软潘正磊谈DevOps、Visual Studio 2013新功能、.NET未来
日前,微软开发平台事业部全球资深副总裁潘正磊(Julia Liuson)从美国总部回到北京参加TechEd2013,在大会现场,潘正磊接受了CSDN的访谈,对于微软研发团队如何运用DevOps模式.对 ...
- apache的日志access_log分析
正常日志格式:客户端地址 访问者的标识 访问者的验证名字 请求的时间 请求类型 请求的HTTP代码 发送给客户端的字节数 当网站出问题时分析日志,第一步一般都不会是看访问日志.但是也不能忽视它,在 ...
- NBUT 1219 Time 2010辽宁省赛
Time limit 1000 ms Memory limit 131072 kB Digital clock use 4 digits to express time, each digit ...
- jmeter随笔(31)--RandomString和Random函数使用
在使用jmeter中,用到了一些自带的函数,后面我逐步把自己用到的分享出来,当然这些是比较简单的,也可自己看看英文文档,小怪这里只是结合自己分享. 视频介绍: https://v.qq.com/x/p ...
- vue 之 Vue.extend()
Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象. data 选项是特例,需要注意 ...
- Maven学习- 使用Maven构建Web项目
从网上查了一些资料,才算明白(也就是怎么操作吧),怎么使用Maven构建一个Web项目,找到一篇文档,主要都是从这里学到的: 下载地址:使用Eclipse构建Maven的Web项目.docx 现自己在 ...
- HDU 3546
http://acm.hdu.edu.cn/showproblem.php?pid=3546 题意:10个寄存器初值为1,有加乘赋值运算,最多30w次运算,大数最多5000位,问最后10个寄存器的结果 ...
- 图解SQL的inner join、left join、right join、full outer join、union、union all的区别【转载】
对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...
- HttpWebRequest.Connection的问题
HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://localhost/");request.Co ...
- ConfigUtil读取配置文件
package utils; import java.util.ResourceBundle; public class ConfigUtil { private static ResourceBun ...