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 ...
随机推荐
- Laravel传值总结
Laravel传值:with,view(),compact方法一:with public function index() { $title = '文章标题1'; return view('artic ...
- js并归排序的思路
并归排序,就是分而治之,将长的数组分解为短的数组,一直分到最后,单个单个数组,我们就认为,只有一个元素的数组是有序的.然后再逐个的合并 1.拆分: 很容易 例如数组 [ 2,4,3,5,1,6,8, ...
- JAVA编程思想学习笔记7-chap19-21-斗之气7段
1.枚举 2.内置三种注解 @Override @Deprecated @SuppressWarnings 3.元注解:用于注解其它注解 4.注解处理器:通过反射 5.创建线程的两种方式 实现Runn ...
- HDU 4565 So Easy(矩阵解公式)
So Easy [题目链接]So Easy [题目类型]矩阵解公式 &题解: 感觉这种类型的题都是一个套路,这题和hdu 2256就几乎是一样的. 所以最后2Xn就是答案 [时间复杂度]\(O ...
- python入门第一篇
python里面 单行注释用:#被注释内容 多行注释用:"""被注释内容""" 要想py2.7和py3.5都能运行,必须在文件头部加: #/ ...
- caffe中通过prototxt文件查看神经网络模型结构的方法
在修改propotxt之前我们可以对之前的网络结构进行一个直观的认识: 可以使用http://ethereon.github.io/netscope/#/editor 这个网址. 将propotxt文 ...
- Other Problems
http://www.cnblogs.com/coder211/p/7919749.html http://blog.jobbole.com/17763/http://www.open-open.co ...
- 《大话设计模式》c++实现 工厂模式
工厂模式 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客户端 ...
- JS中常用的输出方式(五种)
1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...
- mysql的指令
mysql有一下几方面的特性: 1:多语言支持 2:可以移植性好 3:免费开源 4:高效(支持多线程,充分利用cpu资源,运行速度非常) 5:支持大量数据查询和储存 6:操作简单易于学习 其实数据库就 ...