让字体在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中 ...
随机推荐
- JQuery --- 第五期 (JQuery节点操作)
学习笔记 1.JQuery添加节点相关方法 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- C#学习(2):委托
1.疑问: 1.委托是什么? 2.为什么需要委托? 3.委托能用来做什么? 4.如何自定义委托? 5..NET默认的委托类型有哪几种? 6.怎样使用委托? 7.多播委托是什么? 8什么是泛型委托? 9 ...
- ES6——内置对象的扩展
字符串的扩展 //模版字符串 let flag=true; let hml=`<ul> <li> <span></span> <span>& ...
- CentOS6.3上部署Ceph
一.背景知识 搭建ceph的机器分为两种:client和非client(mds.monitor.osd). 配置时client只需要在内核编译时选上ceph就行,而其它三种则还需要编译ceph用户态源 ...
- WEB新手之布尔盲注
开始写SQL的题,单引号等特殊符号闭合漏洞比较简单,因此从Less-5开始写. 布尔盲注是多种盲注的一种,这种盲注方法也比较好理解.但使用这种盲注有一个前提,就是网页会有回显,透过这个回显,我们可以通 ...
- luoguP5068 [Ynoi2015]我回来了
https://www.luogu.org/problemnew/show/P5068 ynoi 中的良心题啊 考虑用 bitset 来维护里一个点距离小于 $ y_i $ 的点,那么答案就是一堆 b ...
- Metasploit渗透某高校域服务器
本文作者:i 春秋签约作家——shuteer 前期准备:1. 使用Veil生成免杀PAYLOAD: 2. 有一个外网IP的服务器,安装好metasploit,方便操作. 一.SHELL反弹meterp ...
- PHP和javascript中url编码解码详解
在实际开发中,我们可能会遇到路径编码解码的问题,下面总结了一下: PHP中: 1.urlencode(编码),urldecode(解码) $a = urlencode('http://www.baid ...
- AssertJ断言系列-----------<数据库断言三>
其实,是有很多种数据断言的使用.那么,我们在接口的测试中,到底应不应该加上数据库断言呢?我的观点是,视情况而定:某一些特殊的场景或者特殊的业务,那么我们就一定要加上数据库断言.不是我们测试人员,不相信 ...
- 图的基础---关键路径理解和实现(Java)
引言 之前所说的拓扑排序是为了解决一个工程能否顺利进行的问题.但在生活中,我们还会经常遇到如何解决工程完成需要的最短时间问题. 举个例子,我们需要制作一台汽车,我们需要先造各种各样的零件,然后 ...