让字体在div容器中垂直居中

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
简介: 1. 只显示一行数据的话: 给容器设置height和line-height,并使两个值相等,再加上over-flow:hidden .test{   height:40px;   line-height:40px;   overflow:hidden; }优点:1.

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. 支持所有浏览器
缺点:
容器不能固定高度

 

目录
相关文章
|
4月前
|
JavaScript 容器
vue 限制在指定容器内可拖拽的div
vue 限制在指定容器内可拖拽的div
34 0
|
前端开发 JavaScript 容器
如何保持容器(div)固定宽高比
在前端界面中播放视频和图片的时候,为了保持其内容不变形,就需要保持容器的固定宽高比
112 1
|
运维 前端开发 容器
一文剖析HTML块和内联元素以及DIV容器,运维开发必备前端技能,基本功强化训练。
一文剖析HTML块和内联元素以及DIV容器,运维开发必备前端技能,基本功强化训练。
116 0
|
容器
echarts如何让图表占满整个div容器
echarts如何让图表占满整个div容器
1548 0
echarts如何让图表占满整个div容器
|
容器 前端开发
div中的内容超过容器宽度的问题
问题描述:     排名    参赛选手    月收益    月收益率 在一个div中横向放置了4个inline-block,宽度为百分比,加起来总共是100%。当其中一个inline-block的文字内容超过元素本身的宽度时,发现其他3个inline-block位置会发生改变,但是如果这个inline-block的内容如果为数字或者一整个连续的英文字符串,其他3个inline-block的位置不会发生改变,不过如果这个inline-block的内容为英文段落(单词之间有空格)并且内容超过元素本身的宽度时,其他3个inline-block的位置还是会发生改变。
1335 0
|
JavaScript 前端开发 容器
|
前端开发 容器 算法
公司的一个面试题:如何用css让一个容器水平垂直居中?
DOCTYPE html> demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .
1022 0
|
前端开发 容器 算法
公司的一个面试题:如何用css让一个容器水平垂直居中?
原文:公司的一个面试题:如何用css让一个容器水平垂直居中? DOCTYPE html> demo .
1172 0
|
前端开发 容器 JavaScript
如何让高度、宽度不定的容器保持水平、垂直居中
这个题目似乎解决的办法很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面,第一解决左右居中的问题,第二解决上下居中的问题。   1、左右居中。   左右居中最为简单,使用 text-align:center; 就可以让绝大多数的对象居中对齐,并且这个属性也获得了几乎全部浏览器的支持。
1255 0