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容器中垂直居中的更多相关文章

  1. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

  2. div容器中内容垂直居中

    #box{ width:200px; height:200px; line-height: 200px; vertical-align: middle; margin: 5px; background ...

  3. css实现文本块在容器中垂直居中

    效果如图: css代码: .textContainer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: ...

  4. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  5. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  6. docker容器中安装中文字体

    在项目中用到pdf导出功能,需要安装中文字体,项目使用docker部署,为了方便决定在将字体安装在镜像中. 1.在dockerfile文件中添加字体copy语句(本次用是的宋体,字体源文件放在dock ...

  7. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  8. [HTML]DIV+CSS 文字垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. 6.nuget安装C#Driver驱动ZooKeeperNet

    一: C# 的Drivers   1. nuget上下载 zookeeper.Net   IWatcher是什么?: client 连接到 server 后,会在server上面注册一个watcher ...

  2. Android-MediaPlayer-视频频播放-异步准备

    上两篇博客,Android-MediaPlayer-音频播放-普通准备,Android-MediaPlayer-音频播放-异步准备,主要是讲解了音频(.mp3文件)音乐

  3. HttpServletRequest介绍

    HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象提供的方法,可以获得客户端请求的所有信息. 二 ...

  4. 深入CSS属性(九):z-index

    如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,本文不去讲述基本的API如何使用,而是去更深入 ...

  5. 搭建自己的 Docker 私有仓库服务

    关于 Docker 的介绍这里就省了,Docker 在其相关领域的火爆程度不亚于今年汽车行业里的特斯拉,docCloud 甚至把公司名都改成了 Docker, Inc. 好东西总是传播很快,我们现在已 ...

  6. .Net Core MVC初学习

    .net core已经出来很长一段时间了,没有很好的学习过,现在工作不那么忙了,参考官方文档,在这里记录自己的学习过程! ASP.NET Core 是一个跨平台的高性能开源框架,用于生成基于云且连接 ...

  7. 【总结】 NOIp2018考时经历记

    可能我因为比较菜的原因,还是要写一下这个东西! 发布时间迟与更新时间,毕竟浙江选手为先例 那么希望NOIp8102RP++!!! 突然发现博客园支持更新创作时间了,那么就不咕了! 本次NOIp感受很深 ...

  8. pod-infrastructure:latest镜像下载失败

    报错一:image pull failed for registry.access.redhat.com/rhel7/pod-infrastructure:latest, this may be be ...

  9. python--基础数据类型 set集合

    一.set集合 set集合是python的一个基本数据类型,一般不是很常用.set中的元素是不重复的.无序的.里面的元素必须是可hash的(int, str, tuple, bool) 注意:   s ...

  10. WC2019 全国模拟赛第一场 T1 题解

    由于只会T1,没法写游记,只好来写题解了... 题目链接 题目大意 给你一个数列,每次可以任取两个不相交的区间,取一次的贡献是这两个区间里所有数的最小值,求所有取法的贡献和,对 \(10^9+7\) ...