CSS实现可变行数垂直居中
- <html>
- <head>
- <style>
- .vcenter {
- position: relative;
- height: 100%;
- width:50px;
- }
- .vcenter-child {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- margin: auto;
- display: table;
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="vcenter">
- <div class="vcenter-child">vertical-centering, 我要垂直居中vertical-centering, 我要垂直居中</div>
- </div>
- </body>
- </html>
CSS实现可变行数垂直居中的更多相关文章
- css 单行/多行文字垂直居中问题
例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...
- div+css使多行文字垂直居中?
1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...
- css布局-多行文字垂直居中
方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...
- 纯CSS实现多行文字垂直居中几种方法解析
场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...
- css 超出规定行数自动隐藏
单行overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 多行(兼容各个浏览器)//通过覆盖最后几个字的形式p{positio ...
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
- line-height超出隐藏显示的行数和垂直居中
line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...
- css让文字显示特定行数,多余的显示省略号
/*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...
- CSS文本超出指定行数省略显示
单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...
随机推荐
- Checkstyle:整洁你的代码
内容 Checkstyle简介 下载 Checkstyle的几种使用方式 1) 与Ant结合使用 2) 通过CLI使用 3)在IDE上使用插件 4)在Maven上使用插件 Checkstyle配置 配 ...
- THINKPHP源码学习--------验证码类
TP3.2验证码类的理解 今天在学习中用到了THINKPHP验证码,为了了解究竟,就开始阅读TP验证码的源码. 源码位置:./ThinkPHP/Library/Think/Verify.class.p ...
- [No0000A2]“原始印欧语”(PIE)听起来是什么样子?
"Faux Amis"节目中经常提到"原始印欧语"(PIE)——"Proto-Indo-European". 我们说过,英语,法语中的&qu ...
- js中避免函数名和变量名跟别人冲突
待补充 .... 参考链接: http://blog.csdn.net/formyqianduan/article/details/52118690
- [LeetCode] Kth Smallest Element in a BST 二叉搜索树中的第K小的元素
Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. Not ...
- 请求如何进入ASP.NET MVC框架
一.前言 对于WebForm开发,请求通常是一个以.aspx结尾的url,对应一个物理文件,从代码的角度来说它其实是一个控件(Page).而在MVC中,一个请求对应的是一个Controller里的Ac ...
- Maven的pom报maven-surefire-plugin:pom:2.12.4
新建Maven项目,报错: Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from htt ...
- jqGrid jqGrid分页参数+条件查询
HTML <div class="row"> <div class="col-sm-20"> <form id="for ...
- 冰冻三尺非一日之寒--jQuery
第十七章 jQuery http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...
- 【USACO 3.2】Sweet Butter(最短路)
题意 一个联通图里给定若干个点,求他们到某点距离之和的最小值. 题解 枚举到的某点,然后优先队列优化的dijkstra求最短路,把给定的点到其的最短路加起来,更新最小值.复杂度是\(O(NElogE) ...