有的时候我们会遇到这样一个问题，就是当我们按下F12进行使用firebug调试的时候，我们发现图像没有居中，页面底下有横向的滑动条出现，图片没能够居中，默认状态下只是紧靠在页面最左侧，而我们对图像缩小的时候，图像依然紧靠在页面最左侧，所有我们需要对图像设置居中，无论放大或者缩小页面，都使得图像至始至终都显示在页面的中间。

代码如下

HTML:

<html>

　　<head>

　　</head>

　　<body>

　　　　<div class="background">

　　　　</div>

　　</body>

</html>

CSS:

.background

{

　　background:url(../img/background_name.png) no-repeat center;

}

关于HTML+CSS设置图片居中的方法的更多相关文章

  1. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  2. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  3. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  4. CSS设置元素居中的方法

    1.margin:0 auto; 2.body{text-align:center;} 3.position:absolute; left:50%; margin-left:-(宽/2);

  5. css图片居中，通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

  6. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  7. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

  8. php imagick设置图片圆角的方法

    php imagick设置图片圆角的方法 <pre>header('Content-Type: image/png'); $image = new Imagick('http://stat ...

  9. HTML/CSS：图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中, 下面分几种居中情况分别介绍: css图片水平居中 1.利用margin: ...

随机推荐

  1. CCommandManager 类

    CCommandManager类 CCommandManager 类管理命令及其与图像的关联.描述CCommandManager :: CleanUp从命令列表和全局和用户映射中删除所有元素.CCom ...

  2. svn报错

    错误一:org.apache.subversion.javahl.ClientException: E155004: There are unfinished work items in 'D:\xa ...

  3. 折半算法的C#实现方式-递归和非递归

    这个算法,相信大家都懂,但是不真正的手动写一遍,总觉得不得劲.这不,手动写一遍就是有不一样的效果出现了. 往左折半,还是往右走比较简单,其实这两个算法最关键的是:退出条件 min > max   ...

  4. nodejs学习资料

    官方文档 阿里nodejs7天快速教程 从零开始nodejs系列文章 一个周末掌握IT前沿技术之node.js篇 nodejs中文api文档    nodejs中文api文档(0.12.2) node ...

  5. Keil代码中for循环延时问题

  6. MMORPG大型游戏设计与开发（客户端架构 part2 of vgui）

    这一节我将讲解vgui的基础系统部分,也是该库提供给外部使用的一些重要接口.作为UI部分比较重要的部分,该节有着至关重要的部分,如果没有看到上一节内容,请留意下面的连接.我们现在可以猜想一下在客户端U ...

  7. 谈谈 Google 的 Test Certified

    转载请联系作者,谢谢! 本文简单介绍下Google的Test Certified. Test Certified(后文简称TC)是Google内部的一个认证项目,在8年的时间里取得了多个里程碑,有17 ...

  8. Jmeter :多个jmeter如何参数化获取不同的CSV文件

    如何为不同的jmeter engine建立不同的csv文件: 1.如果需要多个jmeter engine 去读取不同的csv文件,可以使用一个变量去区分 ${__P(InstanceID)},  in ...

  9. java中使用二重循环打印图形

    如图所示:打印沙漏图形 1:因为外层循环控制图形行数,所以首先判断这四个选项能否循环五次 2:以上四个循环的表达式都能循环五次,我们从内层循环入手. A:int i=0;i<5;i++ 当i=1 ...

  10. java 27 - 4 反射之 通过反射获取成员变量并使用

    类Field: 提供有关类或接口的单个字段的信息,以及对它的动态访问权限. A:获得类的成员变量 数组: 1.getFields(公共类的) 2.getDeclaredFields(所有类型的) B: ...