如果是文本字数固定,在div中垂直居中,相信大家都会

这边分享个不固定文本在div中垂直居中的方法

html代码

<div class="box">
<div class="text">4月23日上,据最新的现场图片,正在大连造船厂建造的中国首艘国产航母已经往船坞注水,这意味航母已经进入倒计时。</div>
</div>

css代码

.box{position:relative;width:500px;hieght:300px;}
.text{position:absolute;top:50%;left:10px;transform: translateY(-50%);}

该方法运用了css3的translate位移,所以低版本IE是不兼容的。

文本在div中始终垂直居中的更多相关文章

  1. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. div中字垂直居中对齐

    div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

  3. p标签在div中水平垂直居中且文本左对齐

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  5. DIV中的垂直居中

    <div style="border:0px #ff0000 solid; width:100px;height:380px; line-height:380px; float:lef ...

  6. img标签在div中水平垂直居中--两种实现方式

    第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...

  7. 【div+css】两个div,如何让内层的div在外层div中水平垂直居中

    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...

  8. div中的img垂直居中的方法,最简单! 偷学来的,,,不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

  9. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

随机推荐

  1. Mac环境下Scrapy的安装

    直接命令安装: $ easy_install scrapy 从 GitHub 安装: $ git clonehttps://github.com/scrapy/scrapy.git $ cd scra ...

  2. Shiro权限管理

    1.简介 Apache Shiro是Java的一个安全框架,对比Spring Security,没有Spring Security功能强大,但在实际工作时可能并不需要那么复杂,所以使用小而简单的Shi ...

  3. request模块

    一 介绍 二 基于GET请求 三 基于POST请求 四 响应Response 五 高级用法 一 介绍 # 介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模 ...

  4. C++头文件用<>还是“” 以及 要加.h还是不加 的问题

    1.C++头文件用<>包含还是” “? 答:用<>包含,编译器会先在系统目录下搜索: 用” ” 包含,编译器会先在用户目录下搜索. 所以,如果使用系统标准库,要使用<&g ...

  5. mybatis:SQL拦截器

    打印执行的SQL语句 import java.sql.Connection; import java.text.DateFormat; import java.util.Date; import ja ...

  6. P1250 种树

    P1250 种树 题目描述 一条街的一边有几座房子.因为环保原因居民想要在路边种些树.路边的地区被分割成块,并被编号成1..N.每个部分为一个单位尺寸大小并最多可种一棵树.每个居民想在门前种些树并指定 ...

  7. 差分线Layout的两个误区

    误区一:认为差分线可以相互之间耦合,所以可以相互之间提供回流路径,不需要地作为回流路径: 其实在信号回流分析上,差分走线和普通的单端走线的机理是一致的,即高频信号总是沿着电感最小的回路进行回流.最大的 ...

  8. Linux安装docker

    1.检查内核版本,必须是3.10及以上 uname ‐r 2.安装docker yum install docker 3.输入y确认安装 4.启动docker [root@localhost ~]# ...

  9. JavaScript 判断对象中是否有某属性

    判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式. 一.点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined. ...

  10. Django 2.0 与 Django1.0在内部方法上的差异

    models.Customer.tags.rel 方法 对于Django1 可以通过 models.Customer.tags.to.model.objects.all() 获取一个model下的Ma ...