让字体在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中 ...
随机推荐
- 6.nuget安装C#Driver驱动ZooKeeperNet
一: C# 的Drivers 1. nuget上下载 zookeeper.Net IWatcher是什么?: client 连接到 server 后,会在server上面注册一个watcher ...
- Android-MediaPlayer-视频频播放-异步准备
上两篇博客,Android-MediaPlayer-音频播放-普通准备,Android-MediaPlayer-音频播放-异步准备,主要是讲解了音频(.mp3文件)音乐
- HttpServletRequest介绍
HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象提供的方法,可以获得客户端请求的所有信息. 二 ...
- 深入CSS属性(九):z-index
如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,本文不去讲述基本的API如何使用,而是去更深入 ...
- 搭建自己的 Docker 私有仓库服务
关于 Docker 的介绍这里就省了,Docker 在其相关领域的火爆程度不亚于今年汽车行业里的特斯拉,docCloud 甚至把公司名都改成了 Docker, Inc. 好东西总是传播很快,我们现在已 ...
- .Net Core MVC初学习
.net core已经出来很长一段时间了,没有很好的学习过,现在工作不那么忙了,参考官方文档,在这里记录自己的学习过程! ASP.NET Core 是一个跨平台的高性能开源框架,用于生成基于云且连接 ...
- 【总结】 NOIp2018考时经历记
可能我因为比较菜的原因,还是要写一下这个东西! 发布时间迟与更新时间,毕竟浙江选手为先例 那么希望NOIp8102RP++!!! 突然发现博客园支持更新创作时间了,那么就不咕了! 本次NOIp感受很深 ...
- pod-infrastructure:latest镜像下载失败
报错一:image pull failed for registry.access.redhat.com/rhel7/pod-infrastructure:latest, this may be be ...
- python--基础数据类型 set集合
一.set集合 set集合是python的一个基本数据类型,一般不是很常用.set中的元素是不重复的.无序的.里面的元素必须是可hash的(int, str, tuple, bool) 注意: s ...
- WC2019 全国模拟赛第一场 T1 题解
由于只会T1,没法写游记,只好来写题解了... 题目链接 题目大意 给你一个数列,每次可以任取两个不相交的区间,取一次的贡献是这两个区间里所有数的最小值,求所有取法的贡献和,对 \(10^9+7\) ...