css居中方法详解
水平居中:
通过设置父元素,让子元素内容居中:text-align:center;
通过设置子元素本身,让子元素居中:margin:0 auto;
以上方法生效的前提条件是子元素没有被float元素影响。
垂直居中:
一种方法是通过line-height属性,但是line-height是作用在父元素上,当子元素的line-height值与父元素的height值一致时,文字就垂直居中了。
还有一种方法是通过position属性,这种方法可以说是万能的
父元素加上:position:relative;
子元素使用:position:absolute;(防止子元素飘到外太空去);
width:xxxpx;
height:xxxpx;
top:50%;
left:50%;
margin-top:-height/2(height值除以2的负值)
margin-left:-width/2(width值除以2的负值)
缺点就是必须对元素有确定的宽高值
css居中方法详解的更多相关文章
- StringUtils类API及使用方法详解
StringUtils类API及使用方法详解 StringUtils方法概览 判空函数 1)StringUtils.isEmpty(String str) 2)StringUtils.isNotEmp ...
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- CURL使用方法详解
php采集神器CURL使用方法详解 作者:佚名 更新时间:2016-10-21 对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程 ...
- PHP cURL应用实现模拟登录与采集使用方法详解
对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程链接的数据,但是它的可控制性太差了,对于各种复杂情况的采集情景,file_get_co ...
- [转]CSS vertical-align属性详解 作者:黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- Python数据类型及其方法详解
Python数据类型及其方法详解 我们在学习编程语言的时候,都会遇到数据类型,这种看着很基础也不显眼的东西,却是很重要,本文介绍了python的数据类型,并就每种数据类型的方法作出了详细的描述,可供知 ...
- PHP cURL实现模拟登录与采集使用方法详解教程
来源:http://www.zjmainstay.cn/php-curl 本文将通过案例,整合浏览器工具与PHP程序,教你如何让数据 唾手可得 . 对于做过数据采集的人来说,cURL一定不会陌生.虽然 ...
- 转载 JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...
- Python的Django框架中forms表单类的使用方法详解
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
随机推荐
- 解决wordcloud导出图片不清楚
使用WordCloud生成词云图片 本文详细介绍参考自:https://www.jianshu.com/p/fdd0acccf1c5 wordcloud开源项目:https://github.com/ ...
- Python之路——线程池
1 线程基础 1.1 线程状态 线程有5种状态,状态转换的过程如下图所示: 1.2 线程同步——锁 多线程的优势在于可以同时运行多个任务(至少感觉起来是这样,其实Python中是伪多线程).但是当线程 ...
- path.resolve()和path.join()
resolve 作用:path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径. 语法:path.resolve([...paths]) 说明: ...paths <strin ...
- 页面渲染是否结束 与 jquery插件方法是否可以应用
只有页面全部 渲染结束,才可以调用 插件的方法. 正确写法: $(function(){ 插件调用方法. })
- Python面试题之Python中__repr__和__str__区别
看下面的例子就明白了 class Test(object): def __init__(self, value='hello, world!'): self.data = value >> ...
- saltstack实现自动化扩容
案例:当nginx的并发达到3000,并持续了一段时间时,通过自动化创建一台虚拟机,部署应用最后添加到集群提供服务: zabbix监控(nginx并发量)------->action------ ...
- Error: Flash Download failed - "Cortex-M0"
今天在调试程序时.DEMO板下载几次后就提示Flash下载失败: Keil v4里面的设置都没有动过.不可能被修改.此时.使用新唐的ICP Progra ...
- C++之STL迭代器(iterator)
[摘要]本文是对STL--迭代器(iterator)的讲解,对学习C++编程技术有所帮助,与大家分享. 原文:http://www.cnblogs.com/qunews/p/3761405.html ...
- git分支合并脚本
为什么要写这个脚本 工作中经常会有合并分支的操作,一开始也不以为然,后来发现如果更新频繁的话,根本就停不下来,昨天上午正好有空,就完成了下面的这个初版 可能存在的问题 一般的应用场景都是:从maste ...
- Ubuntu16.04安装搜狗拼音输入法(中文输入法)[转]
本文转载自:https://www.cnblogs.com/darklights/p/7722861.html 虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多 ...