如果是文本字数固定,在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. Anniversary party POJ - 2342 (树形DP)

    题目链接:  POJ - 2342 题目大意:给你n个人,然后每个人的重要性,以及两个人之间的附属关系,当上属选择的时候,他的下属不能选择,只要是两个人不互相冲突即可.然后问你以最高领导为起始点的关系 ...

  2. IIS部署项目

    控制面板\所有控制面板项\管理工具-->Internet 信息服务(IIS)管理器 随便填个名称,项目的路径,选择一个新的端口.

  3. 【原创】大叔经验分享(50)hue访问mysql(librdbms)

    cloudera manager安装hue后想开启访问mysql(librdbms)需要在这里配置(hue_safety_valve.ini) 添加配置如下 [librdbms] # The RDBM ...

  4. .Net ABP 框架 service 无法访问

    最近在看ABP框架,按照文档写好service后,怎么也访问不到,后来发现,忘记把service类设置为public的了! 不写public ABP框架就不能将这个service映射为controll ...

  5. JAVA 数组作为方法返回值—返回地址

    package Code411;/*一个方法可以有0,1,多个 参数,但只能有0和1个返回值希望一个方法产生多个结果数据进行返回 数组作为方法的参数,传递进去的是数组的地址值. */public cl ...

  6. 初学python之路-day10

    基础部分先告一段落,今天开始学习函数. 一.函数:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数         -- 现实中:很多问题要通过一些工具进行处理 => ...

  7. Bootstrap-datepicker3官方文档中文翻译---Methods/方法(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    Methods/方法 方法是由 datepicker 函数调用的,第一个参数为字符串,随后是方法所需的任何参数. $('.datepicker').datepicker('method', arg1, ...

  8. MySQL存储过程(PROCEDURE)(二)

    一.存储过程的修改: 语法:  ALTER {PROCEDURE | FUNCTION} sp_name [characteristic……]  参数解释: Sp_name:表示存储过程或函数的名称 ...

  9. 设计模式 — 抽象工厂模式(Abstract Factory)

    工厂模式已经分析了简单工厂模式和工厂方法模式.并且了解了工厂方法模式去简单工厂模式的延伸,工厂方法模式如果不把工厂类抽象的话,就是简单工厂模式.由前面两个工厂模式可以猜测出抽象工厂模式应该是这两种工厂 ...

  10. 使用 Appium 测试微信小程序 Webview

    打开调试功能 通过微信打开debugx5.qq.com,或者直接扫下面二维码   勾选[打开TBS内核Inspector调试功能]   Chrome查看页面元素 手机连接电脑,查看是否连接成功.如下展 ...