css常用居中
对一个已知大小的元素上下左右居中（已知大小了，直接margin也就行了）：
css如下：
.parent{height:100px;width:100px;background:grey;position:relative;}
.Absolute-Center {
height:50px;
width:50px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
html如下：
<div class="parent">
<div class="Absolute-Center">
</div>
</div>
未知高度上下左右居中
css如下：
.parent{height:200px;width:200px;background:green;position:relative;}
.absolutecentercontent {
margin:auto;
position:absolute;
width:100px;
display: table;
height: auto;
background:red;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.test{
height:50px;
width:50px;
background:white;
}
html如下
<div class="parent">
<div class="absolutecentercontent">
<div class="test"><div>
</div>
</div>
未知高度上下左右居中
css如下：
.parents{height:200px;width:200px;background:grey;position:relative;}
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background:red;
}
html如下:
<body>
<div class="parents">
<div class="is-Transformed">
1212
</div>
</div>
</body>
css文字居中:
.scatter{
display:block;
text-align: justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.scatter:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
在不确定文字是否一行能显示完时，对文字的上下居中应该是设置padding，行的高度不做设定，自适应，word-break:break-all;换行显示;
css常用居中的更多相关文章
- css常用居中方式
一.水平居中 1.内联元素 父级元素加 text-align: center 即可 html <div class="container"> <a>内联元素 ...
- CSS常用选择器名
一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- html+css常用总结
一,HTML结构: 1,DOCTYPE 2,head: title:网站的标题 meta charset 3,body: 二,HTML标签: 块状元素和内联元素: 常见的块级元素有:div.p.add ...
- CSS常用标签-手打抄录-感谢原未知博主-拜谢了
CSS常用标签 CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- HTML、CSS常用技巧
一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...
- css常用代码大全
css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置1.font-size: 字号参数 2.font-style: 字体格 ...
随机推荐
- java多线程四种实现模板
假设一个项目拥有三块独立代码块,需要执行,什么时候用多线程? 这些代码块某些时候需要同时运行,彼此独立,那么需要用到多线程操作更快... 这里把模板放在这里,需要用的时候寻找合适的来选用. 总体分为两 ...
- R语言爬虫 rvest包 html_text()-html_nodes() 原理说明
library(rvest) 例子网页:http://search.51job.com/jobsearch/search_result.php?fromJs=1&jobarea=010000% ...
- Monit：开源服务器监控工具
Monit是一个跨平台的用来监控Unix/linux系统(比如Linux.BSD.OSX.Solaris)的工具.Monit特别易于安装,而且非常轻量级(只有500KB大小),并且不依赖任何第三方程序 ...
- Azure 基础：用 PowerShell 自动发布 CloudServices
在软件的开发过程中,自动化的编译和部署能够带来很多的优势.下面我们聊聊如何自动发布云应用程序到 azure 上的 cloud services. 打包要发布的内容 首先使用 msbuild 编译 *. ...
- java8-lamba表达式的使用-遁地龙卷风
(-1)前言 学习lamba表达式是十分重要的,你会发现java变的可爱多了. (0)函数式接口 只有一个方法的接口称为函数式接口 JButton jButton = new JButton(&quo ...
- 理解WEB API网关
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- Winfrom 程序打包及安装
前言 近期被公司外派到驻空调厂的项目组,支援一个TCP相关的程序对接.主要是做智能门禁系统,然后主要是统计出实时的进出人数. 我这边能作为服务端,门禁设备作为客户端,整个流程并不算复杂,根据协议来写, ...
- rsyslog+mariadb+loganalyzer实现日志服务器搭建
rsyslog+mariadb+loganalyzer实现日志服务器搭建 一.概述 Linux的日志记录了用户在系统上一切操作,包括系统自身运作产生的日志,这些日志是应使用者了解服务器的情况最好的资料 ...
- SQL Server 2008R2 企业版 百度云下载地址
SQL Server 2008R2 (百度云下载地址:链接: http://pan.baidu.com/s/1mi34II8 密码: yc1w) ASP.NET MVC4.0+ WebAPI+Ea ...
- 关于select count
关于select count,之前有一些不清楚的地方,看到阿里巴巴的Java编程规范,sql规约的第一条就是关于select count的 需要明确以下两点: 1.select count(常量)和s ...