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. airport 抓包

    链接airport命令: ln -s /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources ...

  2. C# PowerPoint操作的基本用法。

    代码using System;using System.Collections.Generic;using System.Linq;using System.Text;using OFFICECORE ...

  3. [POJ-3237] [Problem E]

    Tree Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 13156   Accepted: 3358 题目链接 http: ...

  4. zun 不能创建 docker 容器,报错: datastore for scope "global" is not initialized

    问题:zun不能创建docker容器,报错:datastore for scope "global" is not initialized   解决:修改docker 服务配置文件 ...

  5. Git 教程 -- 基于自己学习记录

    Git 教程 -- 基于自己学习记录 1. 引言 由于学校布置了一项熟悉 git 和 svn 操作的实验,所以自己重新温习了下 git,记录过程在这. 2. 注册登录 GitHub. 3. 选择一个仓 ...

  6. jquery中使用布尔类型数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 记一名软件实施自学转Java开发,附学习计划

    2015年毕业到现在已经3年了,而我转型开发已经有一年的时间了.写这篇文章除了记录,主要还是想分享一些经历给想要转型开发的同学们,不要走那些我走过的弯路. 2015年入职了第一家公司,当时是做的分销系 ...

  8. day04 --class --homework

    # -*- coding: utf-8 -*- # @Time : 2018/12/24 12:10 # @Author : Endless-cloud # @Site : # @File : 04 ...

  9. docker安装Tomcat软件,部署项目

    1 搜索tomcat镜像 $ sudo docker search tomcat NAME DESCRIPTION STARS OFFICIAL AUTOMATED tomcat Apache Tom ...

  10. [转载+整理]Nginx Location匹配规则

    目录 规则语法 location 分类 匹配顺序: 扩展 location / {}和 location =/ {}的区别 测试 规则语法 语法 匹配规则 空 普通匹配(遵循最大前缀匹配规则, 优先度 ...