div容器中内容垂直居中
#box{
width:200px;
height:200px;
line-height: 200px;
vertical-align: middle;
margin: 5px;
background-color: #ffd200;
font-size: 30px;
color: white;
text-align: center;
}
使用vertical-align属性来实现垂直居中。
实例代码如下如下
<style type="text/css">
#box{
width:250px;
height:200px;
line-height: 200px;
vertical-align: middle;
background-color: #ffd200;
font-size: 30px;
color: white;
text-align: center;
}
</style>
效果如下
div容器中内容垂直居中的更多相关文章
- DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
- 5种样式实现div容器中三图摆放实例对比说明
代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
- 定时脚本删除docker容器中内容
今天在我同步mongo数据库的时候,服务器的磁盘突然就被占满了导致同步中断,mongo容器也停止工作了.然后就想要弄一个能够定时清理同步过程中留存在docker容器中的mongo数据的脚本.话不多说, ...
- 让字体在div容器中垂直居中
1. 只显示一行数据的话: 给容器设置height和line-height,并使两个值相等,再加上over-flow:hidden .test{ height:40px; line-height:40 ...
- 实现div里的内容垂直居中
---恢复内容开始--- 在项目中我们会遇到这种情况,一个div的宽固定,里面的内容长度不定,不管是一行还是多行,都要垂直居中,有俩个实现方法: 1.使用absolute,top:50%,transf ...
- css实现定高的元素在不定高的容器中水平垂直居中(兼容IE8及以上)
容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...
- 让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
随机推荐
- 用v-if 来给不同筛选出来的todo添加不同的按钮
凡是数据里面有属性a为2的 我就给它放1,2,3 3个按钮 ,有属性为3的就没得按钮 ,属性a为1的 就给它 13两个按钮 效果如下:
- [LeetCode] 696. Count Binary Substrings_Easy
利用group, 将每个连着的0或者1计数并且append进入group里面, 然后再将group里面的两两比较, 得到min, 并且加入到ans即可. T: O(n) S: O(n) 比较 ...
- 从零开始一起学习SLAM | 相机成像模型
上一篇文章<从零开始一起学习SLAM | 为啥需要李群与李代数?>以小白和师兄的对话展开,受到了很多读者的好评.本文继续采用对话的方式来学习一下相机成像模型,这个是SLAM中极其重要的内容 ...
- Cocos Creator scrollview添加事件的两种方法
scrollview添加事件 方法一这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,通过代码添加, 你需要首先构造一个 cc.Component.EventHandler 对象,然后设置好对 ...
- 一个站点配置多个App.config
一个项目一般都只有一个配置文件.web项目中用的是web.config,但项目中有时候需要单独来配置一个文件.比如:app.config,那是否可以呢? 答案是可以的.可以在web.config中指定 ...
- 测试一体机ASM Disk online操作
环境:3台虚拟机 RHEL 7.3 + Oracle RAC 11.2.0.4 问题现象:RAC运行正常,ASM磁盘组Normal冗余,节点主机重启,offline状态的asm disk短时间内可以直 ...
- 30.get和post的区别
POST和GET的区别 Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个 ...
- php 提取多维数组指定列
前言:有时候在开发中会遇到这样的问题,我们需要把有规律的多维数组按照纵向(列)取出,有下面的方法可用: 我们将拿下面的数组来处理: 1 $arr = array( 2 '0' => array( ...
- 大数据项目(MTDAP)随想
Spark MLlib进行example测试的时候,总是编译不通过,报少包<Spark MLlib NoClassDefFoundError: org/apache/spark/ml/param ...
- mysql优化(二)
一.客户端分担. 1.大量的复杂的运算放在客户端处理. 什么是复杂运算,一般我认为是一秒钟CPU只能做10万次以内的运算.如含小数的对数及指数运算.三角函数.3DES及BASE64数据加密算法等等.如 ...