未知行数的文字在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中内容无论多少,都可以垂直居 ...
随机推荐
- webpack-dev-server将文件产出到指定目录
默认情况下webpack-dev-server是将文件产出到内存中,写了一个插件 将文件产出到指定目录, 比较简易啊 哈哈哈 使用代码如下 const WebpackDevServerOutput = ...
- <?xml version="1.0" encoding="UTF-8" standalone="no"?>
XML standalone 定义了外部定义的 DTD 文件的存在性. standalone element 有效值是 yes 和 no. 如下是一个例子: <?xml version=&quo ...
- .Net Entity Framework Core 用 HasColumnType 配置浮点数精度
一.前言 前段时间用.Net Entity Framework core搭建框架,需要配置浮点数的精度,发现.Net Entity Framework core 并没有HasPrecision方法.在 ...
- HDU 1565
http://acm.hdu.edu.cn/showproblem.php?pid=1565 先进行二分图黑白染色,S到黑,白到T,黑到白,问题转化成了求最大权独立集,最大点权独立集=sum-最小点权 ...
- linux 读取物理寄存器
#include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <sys/mman.h ...
- linux下yum安装jdk1.8(rpm包)和tomcat-8.5
Java是目前可移植性较高的语言,相当火热,tomcat运行就需要Java语言环境 ========= 完美的分割线 ========= 0.java简介 1)tomcat运行需要对应的Java环境, ...
- 了解dto概念,什么是DTO
了解dto概念 此博文收集整理了一些主流的文章对于DTO模式的解读,他们大体相似而又各有所不同.对于设计模式的解读也是一个仁者见仁智者见智的事情,不过设计模式往往都是前辈们在遇到一类特定的问题下而 ...
- No.02——第一次使用Android Studio,并创建出Hello World
1.第一次打开Studio 2.点击创建新项目 然后填上相关信息,注意在Company Domain(公司域名)地方的填写,不同于Eclipse对应实际电脑中文件夹,而是在你所选择的Project文件 ...
- Ubuntu配置操作总结
一.fstab和mtab的区别 /etc/fstab:是开机自动挂载的配置文件,在开机时起作用.相当于启动linux的时候,自动使用检查分区的fsck命令和挂载分区的mount命令,检查分区和挂载分区 ...
- ORACLE与SQL SERVER语法区别
一.数据类型 ORACLE与SQL SERVER在数据类型的对比如下: SQL SERVER ORACLE 数字类型 DECIMAL[(P[, S])] NUMBER[(P[, S])] NUMERI ...