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 ...
随机推荐
- arcgis api for flex 开发入门
参考:http://blog.sina.com.cn/s/articlelist_2346836525_1_1.html 参考教程:https://www.jb51.net/books/81280.h ...
- yield和send函数
yield作用类似于return,其本质是一个迭代器. 当程序执行到yield时,会结束本次循环,返回一个值,然后内置含有next()函数, 下次在执行时,会从yield结束的地方继续执行. 带yie ...
- EF或LINQ 查询时使用IN并且根据列表自定义排序方法
EF和LINQ改变了原有的手写SQL时期的一些编码方法,并且增强了各数据库之间的移植性简化了开发时的代码量和难度,由于很多人不熟,经常会碰到一些写SQL语句时经常会用到的一些方法,而使用EF或LINQ ...
- Mongodb 文档时间字段修改
mongo文档[tblEvent]如下: { "_id" : ObjectId("5a0415f9bf28b684b1c7f5b2"), &qu ...
- c#之根据出生日期获得星座信息
星座定义如下: 代码如下: public enum Constellation { Aquarius = , // 水瓶座 1.20 - 2.18 Pisces = , // 双鱼座 2.19 - 3 ...
- SVN—使用总结
SVN使用教程总结 为什么要使用SVN? 在程序的编写过程中,每个程序员都会负责开发一个或多个模块,且开发中会生成很多不同的版本, 这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版 ...
- Beta阶段冲刺2.0
1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 "我的活动详情&quo ...
- CSS radial-gradient() 函数实现渐变
值 描述 shape 确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变. circle :指定圆形的径向渐变 size 定义渐变的大小,可能值: farthest-corner (默认 ...
- ArrayList与List性能测试
理论:由于ArrayList存储数据存在装箱(读取数据存在拆箱),而泛型List<T>直接对T类型数据进行存储,不存在装箱与拆箱拆箱操作,理论上速度应该快一些. 废话少说,上代码. pub ...
- Yii Restful api自定义字段