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 ...
随机推荐
- [C语言]删除用户自定义后缀名的所有文件
环境:win7 IDE:DEV-C++ 编译器:GCC 编译结果:Success 运行结果:Success 使用说明: 1.输入需要查询的目录,比如e: 2.输入需要删除的后缀名:比如:txt 注意: ...
- Java分布式:消息队列(Message Queue)
Java分布式:消息队列(Message Queue) 引入消息队列 消息,是服务间通信的一种数据单位,消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.队列,是一种常见的数据结 ...
- 从u-boot的编译结果中提取include目录
ac@DESKTOP-BJ1MJGM:~/u-boot-2019.01/spl$ arm-linux-gnueabihf-objdump -g u-boot-spl | awk '/The Direc ...
- NGUI混合FingerGesture《卷一》 统一坐标
问题背景 使用FingerGesture 获取触碰点2D坐标, 将该2D坐标赋值给NGUI元素,发现位置出现偏差. 排查思路 1:NGUI的 (0,0,0)默认位置是在屏幕正中心.而FingerGes ...
- 小练手:用HTML5 Canvas绘制谢尔宾斯基三角形
文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大 ...
- $ 一步一步学Matlab(3)——Matlab中的数据类型
小学时候我们就知道,数学中有自然数.整数.分数.小数等等很多种类型的数.到了中学,我们又发现了其实还有无理数.复数这些有些特殊的数.到了大学学了高等数学之后,我们又知道了其实还存在着无穷大.无穷小这样 ...
- centos 查询mysql配置文件位置
具体指令: 1.which mysqld (”which 文件名“ : 搜索命令所在路径及别名) 2./usr/sbin/mysqld --verbose --help | grep -A 1 'D ...
- ThreadPoolExecutor源码浅析
目录 初始化 ctl变量 添加任务 addWorker方法 worker实现 执行任务 关闭连接池 参考 初始化 ThreadPoolExecutor重载了多个构造方法,不过最终都是调用的同一个: p ...
- This version of MySQL doesn't yet support 'LIMIT & IN/ALL/ANY/SOME subquery' 解决办法
背景:mysql5.1.36,mybatis 前言:为了解决一对多,分页显示,但是前端主要是显示的一的一方的数据和(多方的某个字段拼接在一起),此时的limit不能直接跟在查询的后面,需要用子查询把需 ...
- TeeChart.Direct2D.dll的使用
这个dll本身依赖于第三方的控件,SlimDX ,可以从 http://slimdx.org/ 下载. .net4.0的版本区分x86和x64 帧数的概念 我们通常说帧数,简单地说,就是在1秒钟时间 ...