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 ...
随机推荐
- XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem L. Canonical duel
题目:Problem L. Canonical duelInput file: standard inputOutput file: standard outputTime limit: 2 seco ...
- 服务器抓包命令:tcpdump详解
官网地址:http://www.tcpdump.org/tcpdump_man.html 简介: tcpdump,就是:dump the traffic on a network,根据使用者的定义对网 ...
- 自定义圆形头像CircleImageView的使用和源码分析
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0806/3268.html tools:context="com.ex ...
- 从HighGUI的一段代码中看OpenCV打开视频的方式
OpenCV的HighGUI提供了视频和摄像头的直接打开.那么它是如何实现的了?这里进行初步分析. ; switch(apiPreference) { default: ...
- 20145312 《Java程序设计》第10周学习总结
20145312 <Java程序设计>第10周学习总结 学习总结 一. 什么是网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的 ...
- 20145328 《Java程序设计》第9周学习总结
20145328 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1JDBC 16.1.1JDBC简介 JDBC(Java DataBase Connec ...
- springboot访问jsp页面
1.新建springboot项目,选择以war包的方式package; image 2.勾选Web模块,DevTools可不选(用作热部署,不影响运行) image 3.创建完成后,项目结构如 ...
- 如何打开linux内核中dev_dbg的开关
比如要打开某个驱动中的dev_dbg,那么需要在驱动文件.c中这些行"<linux/device.h>"或者"<linux /platfom_devic ...
- bellman-ford(可判负权回路+记录路径)
#include<iostream> #include<cstdio> using namespace std; #define MAX 0x3f3f3f3f #define ...
- Maven 修改默认JDK版本
方式1.修改maven全局jdk 修改 安装目录\maven2\conf\settings.xml <profiles> <profile> <id>jdk-1.6 ...