css多行本文垂直集中
<div style="display:table;height:400px;">
<span style="display:table-cell;vertical-align:middle;">你要填写的内容</span>
</div>
.wrapper{
height:400px;
display:table;
}
.content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
css多行本文垂直集中的更多相关文章
- css多行显示省略号
首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- 【css】一行或者多行文字垂直水平居中
1.方法一:使用css3弹性盒子(兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持) <!DOCTYPE html> <html> < ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- css多行省略
单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...
- CSS多行文字垂直居中的两种方法
之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...
- css实现行内文字垂直居中
之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...
- CSS躬行记(8)——裁剪和遮罩
一. 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是 ...
随机推荐
- click事件和jquery选项卡
一. click事件 实现效果是点击切换按钮,可以重复的切换背景色 <!DOCTYPE html> <html lang="en"> <head> ...
- iOS核心动画之视觉效果
圆角 cornerRadius确定圆角的大小 masksToBounds确定要不要裁减圆角以外的界面 图层边框 borderWidth 边框的粗细,point是衡量值. borderColor 边框的 ...
- Saiku2.6 Saiku315 链接SQL的JDBC字符串
Saiku26 type=OLAP name=CloudConn driver=mondrian.olap4j.MondrianOlap4jDriver location=jdbc:mondrian: ...
- python在一堆目录中寻找json文件
在一个目录下,有好几层目录,里面零零散散存放着几个json文件,我要做的是用python脚本把它们都找出来,一开始就一层一层地找,用os.listdir加上for循环,根据目录树的深度确定for循环的 ...
- android 微信 SDK 分享
1.资源依赖: https://open.weixin.qq.com/cgi-bin/showdocument?action=doc&id=open1419319167&t=0.613 ...
- V1-bug Alpha阶段发布说明
V1-bug Alpha阶段发布说明 欢迎使用WEDO创意社区(部署IP为:60.205.230.0) WHAT'S WEDO 这是一个致力于创意发布.合作开发的网站. 模块 功能 注册 添加新账号 ...
- oracle 中的exists 和 in 效率问题
oracle中的 exists 和 in 的效率问题 --------------------------------------------------------------- +++++++++ ...
- AngularJs学习笔记--Injecting Services Into Controllers
原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...
- Robot Framework_Ride(Run标签)
前言 我一直在想 Robot Framework 不要 RIDE 可不可以.对于编写测试用例来说,只要掌握 RobotFramework 的语法规则,随便在一个你顺手的编辑器下编写也没问题,甚至效率更 ...
- Spark on YARN模式的安装(spark-1.6.1-bin-hadoop2.6.tgz + hadoop-2.6.0.tar.gz)(master、slave1和slave2)(博主推荐)
说白了 Spark on YARN模式的安装,它是非常的简单,只需要下载编译好Spark安装包,在一台带有Hadoop YARN客户端的的机器上运行即可. Spark on YARN简介与运行wor ...