未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的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中内容无论多少,都可以垂直居 ...
随机推荐
- Java IO流经典练习题
一.练习的题目 (一) 在电脑D盘下创建一个文件为HelloWorld.txt文件,判断他是文件还是目录,在创建一个目录IOTest,之后将HelloWorld.txt移动到IOTest目录下去:之后 ...
- tensorflow读取训练数据方法
1. 预加载数据 Preloaded data # coding: utf-8 import tensorflow as tf # 设计Graph x1 = tf.constant([2, 3, 4] ...
- tensorflow中的参数初始化方法
1. 初始化为常量 tf中使用tf.constant_initializer(value)类生成一个初始值为常量value的tensor对象. constant_initializer类的构造函数定义 ...
- WinRAR备份技巧 - imsoft.cnblogs
RAR控制台日常备份策略 run.batrar a -ep1 -agYYYY{年}MM{月}DD{日} 备份 @list.txt-ep1是忽略原文件路径,rar包里是一堆文件,没有目录结构-ag附加命 ...
- css hover遮罩层
马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的. 最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额 ...
- 《DSP using MATLAB》Problem 4.15
只会做前两个, 代码: %% ---------------------------------------------------------------------------- %% Outpu ...
- DOS命令下使用sqlite3 命令中文乱码的解决办法
windows cmd窗口无法显示中文,不一定数据库中存储的就是乱码——多数情况只是显示问题,可以通过以下方式解决: 1.退出dos 或者重新开启在CMD窗口,输下:chcp 65001 然后回车确定 ...
- LeetCode Single Number I II Python
Single Number Given an array of integers, every element appears twice except for one. Find that sing ...
- ES6必知必会 (三)—— 数组和对象的拓展
数组的扩展 1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列: console.log(...[1, 2, 3]) // 1 2 3 console ...
- Linux内核时间
1. printk打印的时间戳 [ 7236.595796] usb 2-1.1: new high-speed USB device number 15 using ehci-platform st ...