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 ...
随机推荐
- Spring-1-A Post Robot(HDU 5007)解题报告及测试数据
Post Robot Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K Problem Description ...
- springer论文模板参考文献的顺序问题
latex环境 MikTex 2.9 + TeXstudio 2.12.8 (+ Mendeley) 问题 springer提供的latex模板 中最后的参考文献是按照字母顺序排列的.我想要弄成按照文 ...
- JSM 学习(一)
JMS 支持两类消息传送模型:点对点模型和发布/订阅模型.又称这些消息传送模型为消息传送域.点对点模型和发布订阅模型分别缩写为p2p和Pub/Sub.发布订阅模型用于一对多消息广播,点对点模型用于一对 ...
- iOS 动态调用方法
- (void)bugly { dispatch_async(dispatch_get_global_queue(0, 0), ^{ if (NSClassFromString(@"Bu ...
- 2 安装企业wiki:confluence
jira sudo /etc/init.d/jira start 启动 jiarsudo /etc/init.d/jira stop 停止 jiar 方法一:$ sudo /etc/init.d/co ...
- JMeter插件管理器
JMeter插件管理器 来自官网:https://jmeter-plugins.org/wiki/PluginsManager/ JMeter插件管理器的想法很简单:不是手动安装各种插件,而是通过漂亮 ...
- Android利用方向传感器获得手机的相对角度实例说明
http://www.jb51.net/article/37710.htm 1.android 的坐标系是如何定义x, y z 轴的 x轴的方向是沿着屏幕的水平方向从左向右,如果手机不是正方形的话,较 ...
- COGS 197 [HAOI2008] 排名系统
★★★☆ 输入文件:rank.in 输出文件:rank.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 排名系统通常要应付三种请求:上传一条新的得分记录.查询 ...
- 【前端】Vue.js实现简单价格计算器
价格计算器 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> ...
- 优盘版Kali
准备USB镜象 下载Kali linux. 如果你用的是Windows,下载Win32 Disk Imager. *nix类系统不需要额外的软件. 一块U盘(至少 2GB 容量). Kali Linu ...