文本在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 ...
随机推荐
- Pytorch--Dropout笔记
dropout常常用于抑制过拟合,pytorch也提供了很方便的函数.但是经常不知道dropout的参数p是什么意思.在TensorFlow中p叫做keep_prob,就一直以为pytorch中的p应 ...
- 2018-2019-2 20165325《网络对抗技术》Exp0 Kali安装 Week1
2018-2019-2 20165325<网络对抗技术>Exp0 Kali安装 Week1 一.安装kali VMware上学期已经有了,主要是下载Kali-Linux-2019.1-vm ...
- SpringMVC使用StandardServletMultipartResolver上传文件
DispatcherServlet并没有实现任何解析multipart请求数据的功能,它将该任务委托给了Spring中MultipartResolver策略接口的实现,通过该接口的实现类来解析mult ...
- python制作串口工具
# coding:utf-8import timeimport serialimport stringimport binasciiimport linecache FilePath="G: ...
- python input()键盘输入8583报文带有\x单反斜杠自动转义问题解决办法
用input()输入的字符串是8385报文比如:\x30\x30\x30\x30...,但是输入后,代码把8583报文字符串中多加了一个\,类似\\x30. 但是我把input()代码注释掉,把858 ...
- A previous installation of Qt5 Visual Studio Add-in was detected. Please uninstall it before running this installer解决办法
前段时间在安装Qt Visual Studio插件的时候,安装到一半不小心中止了,结果后来怎么安装都不行,提示已经安装了,要先卸载, 可是到哪里都找不到有卸载的,因为压根就没有安装完成.这可害苦我了. ...
- nb-iot简介【转】
转自:http://www.elecfans.com/tags/nb-iot/ 标签 > nb-iot nb-iot 关注 118人关注 提供NB-IoT技术特点,NB-IoT模块/芯片,NB- ...
- Loadrunner测试数据库性能,测试SQL语句的脚本例子
Loadrunner与SQL Server的操作可以通过录制的方式来实现,但本文还是通过直接调用loadrunner本身的function来实现sql语句的操作, 主要用到的是lr_db_connec ...
- 【java】java基本用法记录
java用法总结 计时 long startTime = System.nanoTime(); solution.process(inputFile); long endTime = System.n ...
- Django2.0 和 Django1 中的正则匹配问题
2.0内的path匹配正则时候无效时,导入re_path即可 from django.urls import path,re_path from king_admin import views url ...