让字体在div容器中垂直居中
1. 只显示一行数据的话:
给容器设置height和line-height,并使两个值相等,再加上over-flow:hidden
.test{
height:40px;
line-height:40px;
overflow:hidden;
}
优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话,overflow: hidden 一定要
2.多行内容居中,且容器高度可变
给出一致的 padding-bottom 和 padding-top 就行
.test{
padding-top:24px;
padding-botton:24px;
}
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度
让字体在div容器中垂直居中的更多相关文章
- 5种样式实现div容器中三图摆放实例对比说明
代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
- div容器中内容垂直居中
#box{ width:200px; height:200px; line-height: 200px; vertical-align: middle; margin: 5px; background ...
- css实现文本块在容器中垂直居中
效果如图: css代码: .textContainer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: ...
- DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- docker容器中安装中文字体
在项目中用到pdf导出功能,需要安装中文字体,项目使用docker部署,为了方便决定在将字体安装在镜像中. 1.在dockerfile文件中添加字体copy语句(本次用是的宋体,字体源文件放在dock ...
- div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...
- [HTML]DIV+CSS 文字垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- scala 删除一个文件夹以及其子目录和文件
/** * 删除一个文件夹,及其子目录 @param dir */ def deleteDir(dir: File): Unit = { val files = dir.listFiles() fil ...
- 获取BinaryReader中读取的文件名
BinaryReader br; br = null; br = new BinaryReader(new FileStream("E:demo.txt", FileMode.Op ...
- linux命令之用户管理及用户信息查询命令(下)
1.visudo:编辑sudoers文件 该命令专门用来编辑/etc/sudoers文件,同时提供语法检查等功能. 示例: 1)执行visudo对普通用户授权 [root@boxiaoyuan ~]# ...
- linux强制安装rpm包的命令
rpm -ivh *********.rpm --nodeps --force 强制安装会忽略掉所有依赖关系,强制进行安装
- Mysql Insert Or Update语法实例
有的时候会需要写一段insert的sql,如果主键存在,则update:如果主键不存在,则insert.Mysql中提供了这样的用法:ON DUPLICATE KEY UPDATE.下面就看看它是如何 ...
- 使用unordered_map提升查找效率
在对网络数据包流(Flow)进行处理的时候,一开始为了简单使用了vector做为Flow信息的存储容器,当其中的元素达到几十万时,程序的执行速度让人无法忍受.已经对vector进行过合理的预先rese ...
- Java初学者的学习路线建议
java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...
- Android脚本打包
最近项目中需要添加应用渠道,我使用的是友盟统计,对于不同渠道需要编译不同版本,对于开发者说编译一次,手动操作还是可以接受的,但是项目发布版本频率较高,而且渠道很多,这就是一个体力活,而且手动打包还比较 ...
- 我把阿里云centos gcc从4.4.7升级到4.8.2的经历
我有试着去手动编译安装gcc,可是make的速度实在太慢,最后还直接失败了. 最后在csdn找到了个博客,说是使用yum来安装,网址为: http://blog.csdn.net/ppdouble/a ...
- 机器学习笔记(五) K-近邻算法
K-近邻算法 (一)定义:如果一个样本在特征空间中的k个最相似的样本中的大多数属于某一个类别,则该样本也属于这个类别. (二)相似的样本,特征之间的值应该是相近的,使用k-近邻算法需要做标准化处理.否 ...