未知行数的文字在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中内容无论多少,都可以垂直居 ...
随机推荐
- 你应该关注的几个Eclipse超酷插件
来自非营利性Eclipse基金会的Eclipse IDE以其插件生态系统著称.Eclipse市场拥有海量插件可供下载,你可以通过插件定制自己的Eclipse. 最近我在Eclipse Marketpl ...
- git add && git add -u && git add -A
git add将当前工作目录中更改或者新增的文件加入到Git的索引中,加入到Git的索引中就表示记入了版本历史中,这也是提交之前所需要执行的一步.可以递归添加,即如果后面跟的是一个目录作为参数,则会递 ...
- springboot跨域请求
首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 SpringBoot | 番外:使用小技巧合集 2018/09/17 | 分类: 基础技术 | 0 条评论 | 标 ...
- UIImageView有关的帧动画
纯代码:设置imageView帧动画 @interface ViewController () { UIImageView *_imgView; NSMutableArray<UIImage * ...
- caffe编译问题-nvcc fatal:Unsupported gpu architecture 'compute_20'
错误描述 nvcc fatal : Unsupported gpu architecture 'compute_20' Makefile:: recipe for target '.build_rel ...
- HDU 4638 树状数组 想法题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4638 解题思路: 题意为询问一段区间里的数能组成多少段连续的数.先考虑从左往右一个数一个数添加,考虑当 ...
- 《DSP using MATLAB》Problem 4.12
代码: function [As, Ac, r, v0] = invCCPP(b0, b1, a1, a2) % Determine the signal parameters Ac, As, r, ...
- hdu1081 DP类最大子段和(二维压缩+前缀和数组/树状数组计数)
题意:给出一个 n * n 的数字矩阵,问最大子矩阵和是多少. 由于和最长子段和问题类似,一开始想到的就是 DP ,一开始我准备用两个循环进行 DP ,对于每一个 (i,j) ,考察(i - 1,j) ...
- Spring Data JPA Hibernate @QueryHints
另一个实例: http://leobluewing.iteye.com/blog/2032396 : 本文内容来源:https://blog.csdn.net/gavinchen1985/articl ...
- makefile,让编译更简单
陈皓 (CSDN) 概述—— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的 ...