如果是文本字数固定,在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. MSSQL的简单盲注

    方式一:遍历ascii码的方式 一.判断数据库类型 and (select count(*) from sysobjects)>0 二.获取数据库 and ascii(substring((se ...

  2. 找到多个与名为“Home”的控制器匹配的类型。解决方法

    “/”应用程序中的服务器错误. 找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间以搜索与此请求相匹配 ...

  3. jmeter测试报告分析

    转载:http://www.cnblogs.com/miaomiaokaixin/p/6118081.html 在cmd中用命令行执行jmeter脚本: jmeter地址  -n -t  脚本地址  ...

  4. 解析查询 queryString 请求参数的函数

    quety string 请求参数 本质上可以理解为一种序列化的格式,与 json 类似,它是一种字典类型的容器,里面可以保存键值对(key-value pair).只不过 querystring 这 ...

  5. Oracle建立全文索引详解

    Oracle建立全文索引详解1.全文检索和普通检索的区别 不使用Oracle text功能,当然也有很多方法可以在Oracle数据库中搜索文本,比如INSTR函数和LIKE操作: SELECT *FR ...

  6. eclipse导入maven时,html页面引入js的路径出现红色波浪线

    用eclipse导入一个springboot项目时,html页面引入js以及css时出现如下图所示情况,html页面用了 thymeleaf模板引擎.另外js文件与css文件路径也是正确无误的. 原来 ...

  7. 处理H5新标签方法

    语义化 HTML5中加入了更加具有语义化的标签,比如header,nav,footer等,可以为搜索引擎优化,让爬虫能更好地理解网页结构. 但是对于新标签的兼容性不是很好,IE9以下旧版本不支持新的语 ...

  8. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  9. MySQL-连表查询联系

    链接 1.将老师的姓名和所教课程罗列出来 SELECT teacher_id,tname,cname FROM course LEFT JOIN teacher ON course.`teacher_ ...

  10. python3+Robot Framework+PyCharm自动化测试框架设计

    关于自动化测试框架的设计,笔者在前面的随笔里面有介绍和总结,这里结合实际的项目例子做个demo,环境部署参考笔者的的随笔<python3+Robot Framework+PyCharm环境部署及 ...