文本在div中始终垂直居中
如果是文本字数固定,在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中始终垂直居中的更多相关文章
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
- p标签在div中水平垂直居中且文本左对齐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- div图片垂直居中 如何使div中图片垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...
- DIV中的垂直居中
<div style="border:0px #ff0000 solid; width:100px;height:380px; line-height:380px; float:lef ...
- img标签在div中水平垂直居中--两种实现方式
第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...
- 【div+css】两个div,如何让内层的div在外层div中水平垂直居中
好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...
- div中的img垂直居中的方法,最简单! 偷学来的,,,不要说我抄袭啊(*^__^*)
让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell; 让标签具有表格的属 ...
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
随机推荐
- python模块------shutil
说明 shutil -- High-level file operations 是一种高层次的文件操作工具 类似于高级API,而且主要强大之处在于其对文件的复制与删除操作更是比较支持好. copy() ...
- iOS 图片9切
UIImageView *svRect; UIImage *backgroundImage = [UIImage imageNamed:@"bg.png"]; background ...
- # 20175333曹雅坤《Java程序设计》第七周学习总结
教材学习内容总结 第八章-常用实用类String类 构造String对象 字符串的并置 String类的常用方法 字符串与基本数据的互相转化 对象的字符串表示 字符串与字符.字节数组 正则表达式及字符 ...
- c# 序列化效率比拼
前言:作为开发人员,对象的序列化经常用到,特别是在现在前后端分离 采用json 交互 ,就将原来用过的几种方式总结了下,也算是做一个记录,顺便做了下性能测试. 1:内置 JavaScriptSeria ...
- 项目Alpha冲刺(团队)-第三天冲刺
格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:为了交项目干杯 作业目标:描述第三天冲刺的项目进展.问题困难.心得体会 ...
- 记一次简单的GetShell案例
案例链接: http://202.112.51.184:8007/ 打开链接,发现分了多个页面: 挨个点击,大概清楚是上传指定格式的文件然后在搜索的时候使文件执行从而GetShell,观察发现点击每个 ...
- sublime text3输出窗口中文显示乱码问题解决方案
1 前言 略 2 方案 修改Python3.sublime-build内容为 { "cmd": ["C:/Users/Administrator/AppData/Loca ...
- iframe 加form提交数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 数据库六大约束用法:主键(primary key)、外键(foreign key)、非空(not null)、默认(default)、检查(check)、唯一(unique)
1. 数据库有六大约束 主键(primary key) 外键(foreign key):被参照的键必须有唯一约束或是主键 非空(not null) 默认(default) 检查(check):orac ...
- css3——border-image属性的用法
项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现. 实现;//向外偏移10px,可使边框内部的内容不是那么紧凑border-image-repea ...