如果是文本字数固定,在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 os x下几款mysql客户端

    Mac os x几款mysql客户端 1,Navicat 这是一款可支持多种数据库的客户端,可支持mysql,sqlite,oracle,sql server等数据库.当然也可以选择只支持某种数据库的 ...

  2. Python字符串的两种方式——百分号方式,format的方式

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...

  3. Centos系统FastDFS搭建与排错

    FastDFS中Tracker server主要是负载均衡和调度,Storage server主要是文件存储. 1.1 系统环境 [root@ centos fastdfs]# cat /etc/re ...

  4. Linux下执行自定义的可执行命令无效原因

    1 前言 用golang编译成可执行文件tt stats text.txt(tt 是编译后重命名的可执行文件),然后直接执行失败了,后来使用./tt stats text.txt可以了. 执行结果如下 ...

  5. js 本地缓存localStorage

    .localStorage - 没有时间限制的数据存储 ,,]; localStorage.setItem("stor",arr); console.log(localStorag ...

  6. 20175226 2018-2019-2 《Java程序设计》第五周学习总结

    20175226 2018-2019-2 <Java程序设计>第五周学习总结 教材学习内容总结 接口 包含接口声明和接口体 接口声明interface 接口的名字 接口体中包含常量的声明( ...

  7. vuex 收藏一个循序渐进,易懂易行的博客。

    https://www.jianshu.com/p/133d329c3702  记录--

  8. UVA1449 Dominating Patterns

    UVA1449 Dominating Patterns 题目描述 有N个由小写字母组成的模式串以及一个文本串T.每个模式串可能会在文本串中出现多次.你需要找出哪些模式串在文本串T中出现的次数最多. 输 ...

  9. 出错:Failed to convert property value of type 'org.apache.ibatis.session.defaults.DefaultSqlSessionFactory' to required type 'java.lang.String' for property 'sqlSessionFactoryBeanName';

    出错的详细信息: 3 ERROR [http-nio-80-exec-3] org.springframework.web.servlet.DispatcherServlet - Context in ...

  10. 在做zabbix分布式监控时遇到的各种坑

    因为公司在用zabbix的时候需要用到zabbix-proxy,所以今天就在三台虚拟机上做了测试: 环境:zabbix-server端:centos6.8 上面安装了zabbix-server.zab ...