如果是文本字数固定,在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. python模块------shutil

    说明 shutil -- High-level file operations 是一种高层次的文件操作工具 类似于高级API,而且主要强大之处在于其对文件的复制与删除操作更是比较支持好. copy() ...

  2. iOS 图片9切

    UIImageView *svRect; UIImage *backgroundImage = [UIImage imageNamed:@"bg.png"]; background ...

  3. # 20175333曹雅坤《Java程序设计》第七周学习总结

    教材学习内容总结 第八章-常用实用类String类 构造String对象 字符串的并置 String类的常用方法 字符串与基本数据的互相转化 对象的字符串表示 字符串与字符.字节数组 正则表达式及字符 ...

  4. c# 序列化效率比拼

    前言:作为开发人员,对象的序列化经常用到,特别是在现在前后端分离 采用json 交互 ,就将原来用过的几种方式总结了下,也算是做一个记录,顺便做了下性能测试. 1:内置 JavaScriptSeria ...

  5. 项目Alpha冲刺(团队)-第三天冲刺

    格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:为了交项目干杯 作业目标:描述第三天冲刺的项目进展.问题困难.心得体会 ...

  6. 记一次简单的GetShell案例

    案例链接: http://202.112.51.184:8007/ 打开链接,发现分了多个页面: 挨个点击,大概清楚是上传指定格式的文件然后在搜索的时候使文件执行从而GetShell,观察发现点击每个 ...

  7. sublime text3输出窗口中文显示乱码问题解决方案

    1 前言 略 2 方案 修改Python3.sublime-build内容为 { "cmd": ["C:/Users/Administrator/AppData/Loca ...

  8. iframe 加form提交数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 数据库六大约束用法:主键(primary key)、外键(foreign key)、非空(not null)、默认(default)、检查(check)、唯一(unique)

    1. 数据库有六大约束 主键(primary key) 外键(foreign key):被参照的键必须有唯一约束或是主键 非空(not null) 默认(default) 检查(check):orac ...

  10. css3——border-image属性的用法

    项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现. 实现;//向外偏移10px,可使边框内部的内容不是那么紧凑border-image-repea ...