文档章节

图片水平和垂直居中

an_code
 an_code
发布于 2016/12/07 19:29
字数 318
阅读 1
收藏 0
点赞 0
评论 0

背景图片自适应屏幕

background:url(https://img.alicdn.com/imgextra/i3/85662775/TB2ydR9aV95V1Bjy0FgXXc2vFXa-85662775.jpg) no-repeat center 100%

 

 

background:url(../images/list01.png) no-repeat 0 center;

的意思是 图像地址 不重复 水平位置0 垂直位置居中

0 center 的意思就是 水平位置0 垂直位置居中
-4px -3px 的意思就是 水平位置-4px  垂直位置-3px 

这两个值和background-position 属性是一样的,即设置背景图像的起始位置。
这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
默认值:0% 0%
可能的值
 top left
 top center
 top right
 center left
 center center
 center right
 bottom left
 bottom center
 bottom right (以上,如果您仅规定了一个关键词,那么第二个值将是"center"。)

 x% y% ( 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。)

mpx npx (第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。)
 
您可以混合使用 % 和 position 值。

© 著作权归作者所有

共有 人打赏支持
an_code
粉丝 0
博文 8
码字总数 1162
作品 0
杭州
程序员
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0
DIV和Table的水平、垂直居中

一般图片的居中问题容易解决,我的解决方法是通过样式设置: background-image:url(path) //链接图片的路径 background-repeat:repeat; //设置图片是否是否水平、垂直延展。可用的参数有:r...

freedonn
2014/11/10
0
0
CSS整理(3)之让元素水平居中和垂直居中方法

在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结: 实现水平居中: 对于行内元素来说,直接对要设置的元素设...

hyz000
2016/03/29
33
0
元素水平居中和垂直居中的几种简单方法

一、如何使元素在水平方向上居中 1. 使用text-align:center。 在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。 2.在需要居...

小陈同学
2014/05/07
0
3
前端知识复习(一)

1.CSS 中的盒子模型 画出对应的content, margin, padding, and border 边界 图片.png 2.元素 span, img, video 可以设置宽高吗? span不可以,img和video可以 span 属于行内非替换元素不能设...

治电小白菜
2017/11/28
0
0
CSS3常用知识

1.文本超出部分显示为... white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden; 2.文本超出多行结尾部分展示为... height: 46px; //它的值为行高乘以显示...

kouxiaomou
2017/02/24
0
0
元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙
2017/08/16
0
0
CSS 如何使DIV层水平居中

CSS 如何使DIV层水平居中 DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实...

Z_dragon
2014/08/18
0
0
CSS使用的一些小技巧/高级进阶(持续更新)

最近闲暇时间在看鑫爷的《CSS世界》,内容真的是非常精彩,很多细节分析的非常透彻,值得推荐。在日常开发中实现某种效果有很多方式,但是下面的我以前都很少用到,原来css还可以这么玩 😂...

giants_one
06/26
0
0
图片垂直居中(2015-12-11更新)

#main{ position:fixed; height:80%; width:100%; top:10%;}.c,.p{ border:1px #000 solid; width:20%; height:80%; float:left; font-size:0;/去掉字符间距/ text-align:center;}.c>img:fir......

一行代码
2015/12/03
79
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

20位活跃在Github上的国内技术大牛 leij 何小鹏 亚信

本文列举了20位在Github上非常活跃的国内大牛,看看其中是不是很多熟悉的面孔? 1. lifesinger(玉伯) Github主页: https://github.com/lifesinger 微博:@ 玉伯也叫射雕 玉伯(王保平),...

海博1600
9分钟前
0
0
高性能服务器本质论

一 服务器分类 从软件性能角度,高性能服务器分:cpu密集型服务器/IO密集型服务器 (1)CPU密集型:该类服务器没有对io的访问/没有同步点,性能瓶颈在于对cpu的充分利用。 典型的如转发服务器/...

码代码的小司机
10分钟前
0
0
Mybatis收集配置

一、Mybatis取Clob数据 1、Mapper.xml配置 <resultMap type="com.test.User" id="user"> <result column="id" property="id"/> <result column="json_data" property="jsonData" ......

星痕2018
35分钟前
0
0
centos7设置以多用户模式启动

1、旧版本linux系统修改inittab文件,在新版本执行vi /etc/inittab 会有以下提示 # inittab is no longer used when using systemd. # # ADDING CONFIGURATION HERE WILL HAVE NO EFFECT ON......

haha360
今天
0
0
OSChina 周日乱弹 —— 局长:怕你不爱我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ andonny :分享周二珂的单曲《孤独她呀》 《孤独她呀》- 周二珂 手机党少年们想听歌,请使劲儿戳(这里) @孤星闵月 :没事干,看一遍红楼梦...

小小编辑
今天
181
9
Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式 Factory工厂模式 Singleton单例模式 Delegate委派模式 Strategy策略模式 Prototype原型模式 Template模板模式 Spring5 beans 接口实例化 代理Bean操作 ...

小致dad
今天
0
0
SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
11
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
17
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
251
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部