今天工作中遇到一个问题,就是未知行数的文字在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. python运维01-获取系统基础信息

    1.获取系统主机名,IP,MAC地址 import socket import uuid macs = uuid.UUID(int = uuid.getnode()).hex[-12:] mac = ...

  2. 微软IE团队发布《逃离XP》浏览器小游戏

    微软IE团队今天发布了一个有趣的小游戏<逃离Windows XP>,这款游戏可以工作在所有现代浏览器下,简单的街机风格可以让你尽情对XP施展破坏欲.微软发布XP及提供支持服务已经史无前例地 ...

  3. php session和cookie知识

  4. Python学习(006)-深浅拷贝及集合

     深浅拷贝 import copy husband=['xiaoxin',123,[200000,100000]] wife=husband.copy() #浅拷贝 wife[0]='xiaohong ...

  5. secureCRT 字体颜色、文件夹和文件显示的颜色

    secureCRT菜单栏中选择会话选项 修改显示文件夹和文件显示的颜色 修改字体样式 查看效果

  6. 【ssm】拦截器的原理及实现

    一.背景: 走过了双11,我们又迎来了黑色星期五,刚过了黑五,双12又将到来.不管剁手的没有剁手的,估计这次都要剁手了!虽然作为程序猿的我,没有钱但是我们长眼睛了,我们关注到的是我们天猫.淘宝.支付宝 ...

  7. 前端开发 —— js 常用工具函数(utilities)

    1. 时间 function getCurTime() { var date = new Date(); return date.toLocaleTimeString(); } date.toLoca ...

  8. GET_DDL提取建表语句:ddl

    创建对象的语句就是了 提取表 set line 200 pages 50000 wrap on long 999999 serveroutput on SQL> select dbms_meta ...

  9. ScrollView在布局中的作用

    ScrollView就是滚动一个View,将View里面的内容滚动起来. 但是由于scroolview只能有一个孩子,因此我们可以在ScrollView中在定义一个布局. 这样的话,我们就会直接滚动整 ...

  10. 更适合程序员使用的Vim配置 显示行号 语法高亮 智能缩进

    在终端下使用vim进行编辑时,默认情况下,编辑的界面上是没有显示行号.语法高亮度显示.智能缩进等功能的.为了更好的在vim下进行工作,需要手动设置一个配置文件:.vimrc.在启动vim时,当前用户根 ...