让字体在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中 ...
随机推荐
- Websocket出现的错误
前端使用sockjs,后台使用spring的websocket框架 结果在一个网络较慢的地方,发现tomcat报错信息: Oct 28, 2015 10:10:43 AM org.apache.cat ...
- Spring AOP 简单入门笔记 (转)
分享一个自己写的最为简单的Spring AOP的应用,其实,本人也是学习Spring不久,只是把一些个人的理解分享下,供参考.可能很多人刚开始不太理解到底啥是AOP,其实它也是相对 OOP来说的,类似 ...
- struts2设置index.action为主页(另:web.xml编辑卡死问题解决)
本来是弄拦截器的问题,结果弄主页的时候,还是发现了问题. 公司网站的项目里面,是用index.action作为主页的,访问WEB-INF里面的html文件.可是我设置的却不成功,追根到底,一个原因,s ...
- 连接池--sp_reset_connection
--当客户端使用连接池访问数据库时,客户端使用OPEN来重用数据库连接,使用CLOSE来断开数据库连接,但并不物理上新建和断开连接,因此可以提高程序运行速度并降低性能损耗. --ADO和ADO.NET ...
- CodeIgniter使用中写的一些文章
CI的captcha替代类库: http://www.ifixedbug.com/posts/codeigniter-captcha-library 原生的captcha不是太好用,自己组装一个吧. ...
- win10 数字许可证激活被 KMS激活覆盖
打开cmd(管理员身份),依次执行以下命令: slmgr/upk slmgr/ckms slmgr/rearm 重启设备后联网登录Microsoft账号,转设置-激活-疑难解答,windows会找到与 ...
- Working Set
类似于Visual Studio中的Solution 如果Eclipse中的project过多,而且不是同一个真实的项目中的,可以按Working Set对project进行组织,只是一个逻辑组织 操 ...
- Hello World 之 CGAL
CGAL有神秘的面纱,让我不断想看清其真面目.开始吧! 1 Three Points and One Segment 第一个例子是创建3个点和一条线段,并且在其上进行一些操作. 所有的CGAL头文件都 ...
- ubuntu emacs的安装
在终端依次输入这三条命令即可 sudo add-apt-repository ppa:ubuntu-elisp/ppa sudo apt-get update sudo apt-get install ...
- Docker 搭建 etcd 集群配置
#关闭selinux.防火墙 systemctl stop firewalld.service systemctl disable firewalld.service firewall-cmd --s ...