负margin居中
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta name="author" content="胡超" />
<meta charset="utf-8"/>
<style type="text/css">
div { /*负边距margin使居中,首先定位到50% 然后再通过负边距拉回 元素高的一半 宽的一半*/
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
负margin居中的更多相关文章
- 利用负margin实现元素居中
原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父 ...
- 负margin的原理以及应用
负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...
- css布局之负margin妙用及其他实现
相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...
- CSS负margin的影响
原文 简书原文:https://www.jianshu.com/p/87677fd2ea34 相关文章: CSS负边距margin的应用:https://www.cnblogs.com/shcrk/p ...
- 负margin的移位参考线
同早年~ 问题描述 在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,j ...
- 负margin小记
static元素 margin-top/left负值,元素向指定方向移动, margin-bottom/right负值,元素不动,后续元素前移 float元素 左浮, ...
- [转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
- 负margin一些奇葩的布局技巧
copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...
- 负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...
随机推荐
- 解析 MACH_O 文件
现在做iOS开发的挺多,了解一下在苹果平台上程序运行的原理 解析 MACH_O 文件 这篇文章描述了如何解析 Mach-O 文件并稍微解释了一下它的格式.这不是一份权威指南,不过当你不知从何开始时,它 ...
- 预处器的对比——Sass、LESS.
发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,有不同的语法和功能. 不同CSS预处器的蛮量.功能以及他们的好处——Sass.LESS 介绍 CSS预处理器是一种语言,用来编写 ...
- JFrame背景
1.引言 在了解了JFrame面板的相关知识后,我们可以选择在RootPane根面板或LayeredPane面板中设置背景图案. 2.方法 对于大小固定的窗口背景设置如下: //导入图案 ImageI ...
- ANGULARJS 出错解决
先上代码 程序的意思是使用eval更改指令父scope的数据,在调用$digest 这样就出错了,出错信息如下: 解决办法: 增加timeout事件,具体原因还不是很清楚,反正问题目前是解决了.
- 创建论坛Discuz
下载discuz! mkdir /data/wwwcd /data/wwwwget http://download.comsenz.com/DiscuzX/3.2/Discuz_X3.2_SC_GB ...
- Android 浮动搜索框 searchable 使用(转)。
Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...
- 投资统计查询sql
select COUNT(*) from YYD_Users_RegInfo where regTime between '2016-07-11 00:00:00' and '2016-07-11 2 ...
- [转]AndroidTolls国内镜像
AndroidDevTools简介 Android Dev Tools官网地址:www.androiddevtools.cn 收集整理Android开发所需的Android SDK.开发中用到的工具. ...
- bzoj 1951: [Sdoi2010]古代猪文
#include<cstdio> #include<iostream> #include<cstring> #include<cmath> #defin ...
- ZOJ 2477 Magic Cube 暴力,模拟 难度:0
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1477 用IDA*可能更好,但是既然时间宽裕数据简单,而且记录状态很麻烦,就直接 ...