问题:把两个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 以及雪碧图的更多相关文章

  1. V4.0到来了,css雪碧图生成工具4.0更新啦

    V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/det ...

  2. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  3. css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置

    背景图片基础: 使用background-image来设置背景图片 语法: background-image:url(相对与css的路径) 如果背景图片大于元素,默认会显示图片的左上角 如果背景图片和 ...

  4. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

  5. position: absolute;

    .recent-contac { position: absolute; overflow: auto; overflow-x: hidden; top: -2px; bottom: 0; -webk ...

  6. 一种移动端position:absolute布局:

    一种移动端position:absolute布局:   1.他父级不需要加上 position:relative; 如果父级不是不是body,则加position:absolute; 2.红色加量部分 ...

  7. 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  8. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  9. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

随机推荐

  1. 数据库数据生成Excel表格(多用在导出数据)

    最近在项目开发中遇到这样一个需求,用户聊天模块产品要求记录用户聊天信息,但只保存当天的,每天都要刷新清空数据,但聊天记录要以Excel的形式打印出来,于是就引出了将数据库的数据导出成Excel表格的需 ...

  2. ubuntu18和windows10双系统时间不同步问题(Ubuntu)

    1.安装并校准时间 sudo apt install ntpdate sudo ntpdate time.windows.com 2.写入硬件配置 sudo hwclock --localtime - ...

  3. C++:标准模板库Sort

    一.概述 STL几乎封装了所用的数据结构中的算法,这里主要介绍排序算法的使用,指定排序迭代器区间后,即可实现排序功能. 所需头文件#include <algorithm> sort函数:对 ...

  4. MySQL之锁、事务、优化、OLAP、OLTP

    本节目录 一 锁的分类及特性 二 表级锁定(MyISAM举例) 三 行级锁定 四 查看死锁.解除锁 五 事务 六 慢日志.执行计划.sql优化 七 OLTP与OLAP的介绍和对比 八 关于autoco ...

  5. [Python爬虫] 使用 Beautiful Soup 4 快速爬取所需的网页信息

    [Python爬虫] 使用 Beautiful Soup 4 快速爬取所需的网页信息 2018-07-21 23:53:02 larger5 阅读数 4123更多 分类专栏: 网络爬虫   版权声明: ...

  6. C#记录日志到本地文件工具类

    using System; using System.Diagnostics; using System.IO; using System.Threading; using System.Web; n ...

  7. 怎样绑定this

    有三种方法: 1. Function.prototype.call();  2. Function.prototype.apply();  3. Function.prototype.bind(); ...

  8. Prometheus Grafana监控全方位实践

    这次就不用 docker 部署服务了,这样大家会更容易接受.欢迎阅读. 引言 Prometheus 是一个监控系统,也是一个时间序列数据库,用Go语言开发的,官方文档.通过从某些特定的目标如主机,My ...

  9. SIFT算法研究

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://underthehood.blog.51cto.com/2531780/65835 ...

  10. Python实现FTP文件定时自动下载

    之前遇到技术问题总能在技术博客上得到启发,十分感谢各位的无私分享.而自己却很少发文,固然是水平有限,但也限制了知识积累和总结.今后多总结分享,回馈博客的同时也希望大家多多批评. 一.需求: 某数据公司 ...