position:absolute 按钮左右分布:left:0 和 right:0 以及雪碧图
问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部
1,祖父元素设定:position:relative
2,把.arrow 设定上下垂直居中 position:absolute; top:50%; margin-top:-20px;
3,因为父级元素已经进行垂直居中定位,所以,只要把 a 标签进行左右定位即可
a标签公共样式.item{ position:absolute;}
这里如果设置left:0,那么.right设置right:0;就无效,如果同时设置:left:0 和 right:0 会先执行left先。
所以这里不设置,直接到.left 和 .right中各自设置left:0; 和 right:0;最合适
4,.left { left:0 } .right { right:0 }
==============================
读取雪碧图中的指定图片:
公共样式 .item 设置了背景图片: background: url('../img/ui-slider-arrow.png') no-repeat 0 0;
如果有多个 .item 需要设置,那么直接修改background-position: 0 -20px; 即可。
雪碧图的读取基本都是负数坐标。
==============================
<!----对 两个 a 标签定位在 .container 的上下垂直居中,并且两个a标签一个定位在左,一个定位在右边 ---->
<div class="container" style="position:relative; width:600px;height:600px;">
<div class="arrow">
<!----a 标签是图片轮播的前后按钮,宽高都是40px---->
<a class="left item" href="#l"></a>
<a class="right item" href="#r"></a>
</div>
</div> <!----下面是样式----> .container {
width: 545px;
height: 413px;
position: relative;
}
.arrow {
position: absolute;
top: 50%;
margin-top: -20px;
height: 40px;
width: 545px;
}
.arrow .item {
position: absolute;
width: 40px;
height: 40px;
display: inline-block;
background: url('../img/ui-slider-arrow.png') no-repeat 0 0;
}
.left {
left: 0;
background-position: -40px 0;
}
.right { right: 0; background-position: -40px 0; }
单行居中:height=line-height 上下垂直居中text-align:center; 块级元素内容左右居中
多行居中:父元素设置 display:table. 且宽度固定子元素设置 display:table-cell. vertical-align:middle;
定位居中一:父元素设置position:relative;子元素设置position:absolute; 全部设置:top:0; bottom:0; left:0; right:0; margin:auto; 上下左右垂直居中。其中如果只设置如下效果又不一样: top:0;/*不写也可以,默认顶边居中*/ right: 0; left: 0; margin: auto; //本元素相对于有relative的祖先元素左右靠顶边居中。即:设置left=right,margin:auto; 则左右垂直居中。
left: 0; bottom:0;/*默认靠顶边,指定了bottom:0; 才会靠底边左右居中*/ right: 0; margin: auto; //本元素相对于有relative的祖先元素左右靠底边居中。即:设置left=right,margin:auto; 则左右垂直居中。
top: 0; bottom: 0; left:0;/*可以不写,默认就是靠左边垂直居中*/ margin:auto; //本元素相对于有relative的祖先元素上下靠左居中,相当于添加left:0;。即:设置top=bottom,margin:auto; 则上下垂直居中。
top: 0; right:0;/*默认靠左边垂直居中,指定right:0;后才会靠右边垂直剧中*/ bottom: 0; margin:auto; //本元素相对于有relative的祖先元素上下靠右边居中。即:
定位居中二:父元素设置position:relative/fixed; 或者父元素是body。子元素设置position:absolute; left:50%; top:50% margin-left:-(子元素宽度的一半); margin-top:-(子元素高度的一半);
固定宽度块级元素:margin:0 auto; 左右居中。块级元素的内容:text-align: center; 左右居中。行内元素:vertical-align:middle; 上下居中。
背景图片垂直居中使用关键字,top righ bottom left center 百分比。bakcground: color url() no-repeat center right scrollbackground-position: top; 默认top centerbackground-position: right; 默认right centerbackground-position: bottom; 默认bottom centerbackground-position: left; 默认left center
position:absolute 按钮左右分布:left:0 和 right:0 以及雪碧图的更多相关文章
- V4.0到来了,css雪碧图生成工具4.0更新啦
V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/det ...
- css sprite,css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置
背景图片基础: 使用background-image来设置背景图片 语法: background-image:url(相对与css的路径) 如果背景图片大于元素,默认会显示图片的左上角 如果背景图片和 ...
- Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...
- position: absolute;
.recent-contac { position: absolute; overflow: auto; overflow-x: hidden; top: -2px; bottom: 0; -webk ...
- 一种移动端position:absolute布局:
一种移动端position:absolute布局: 1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...
- 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;
声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...
- position absolute 绝对定位 设置问题
今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
随机推荐
- Django打印出在数据库中执行的语句
有时我们需要看models操作时对应的SQL语句, 可以用如下方法查看--- 在django project中的settings文件尾部添加如下代码 LOGGING = { 'version': 1, ...
- C#基础算法题 找出最大值和最小值
找出最大值和最小值 题目要求 输入n个数,n<=100,找到其中最小的数和最大的数 实现代码 using System; namespace _1.求最大最小 { class Program { ...
- 阿里数据迁移DTS【otter】和阿里巴巴mysql数据库binlog的增量订阅&消费组件 【canal】
[链接]alibaba/otterhttps://github.com/alibaba/otter https://github.com/alibaba/canal
- 怎样对小数进行向上取整 / 向下取整 / 四舍五入 / 保留n位小数 / 生成随机数
1. 向上取整使用: Math.ceil() Math.ceil(0.1); Math.ceil(1.9); 2. 向下取整使用: Math.floor() Math.floor(0.1); Math ...
- (十七)Hibnernate 和 Spring 整合
一.Hibnernate 和 Spring结合方案: 方案一: 框架各自使用自己的配置文件,Spring中加载Hibernate的配置文件. 方案二: 统一由Spring的配置来管理.(推荐使用 ...
- XML和JSON序列化以及反序列化
1.将文件保存序列化至文档中,然后再读取: //首先创建可序列化的实体类 [Serializable] public class Message { public string Name { get; ...
- 1 Refused to display ‘url’ in a frame because it set 'X-Frame-Options' to 'sameorigin' 怎么解决?
进在开发公司的文件中心组件,提供各个子系统的附件上传下载.预览.版本更新等功能,前端在今天突然给我发一张图,说预览缩略图遇到问题了,然后发了个截图给我: 这很明显是一个跨域问题, X-Frame-Op ...
- MVC的12种ActionResult介绍以及应用示例【转】
一.介绍 1.ViewResult 表示一个视图结果,它根据视图模板产生应答内容.对应得Controller方法为View. 2.PartialViewResult 表示一个部分视图结果,与ViewR ...
- gin框架实现一个简单的项目 ③
承接:gin框架封装自己的路由 ② 对于一个项目来说,需要将各个功能模块分开,也就是所谓的三层模型,这里介绍一下个人的做法: contorller主要负责路由 model主要负责程序输入输出的数据 s ...
- modelsim仿真xilinx ram输出均为0
现象 在vivado2018.3下生成了RAM IP,丢到modelsim中仿真发现doutb输出均为0.调整AB端口的时钟速率,发现低于5ns不行,输出为0.但5ns以上正常. 解决方法 比对了vi ...