有的时候我们会遇到这样一个问题，就是当我们按下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. bootstrap简单的过一遍

    注:.xxxx 表示类(class=xxxx) <h1>到<h6>均可使用.另外还提供了.h1到.h6的class .lead可以让段落突出显示 <small>  ...

  2. CentOS 6.3下配置iSCSI网络存储

    一.简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够 ...

  3. MMORPG大型游戏设计与开发（part2 of net）

    网络第二部分的将要给大家描述的是网络代码方面的设计,从基础的代码讲起,了解详细的网络模块构架. 没有放出整个源代码,是因为其中还有许多不足的地方,不过想必大家应该也能猜想出这个项目源码的地址了.不过对 ...

  4. 遇到一位ITer，一位出租车司机，必看。

    百木-ITer职业交流 群-北京 :141588103 今天去用户那,一个政府的事业单位.       遇到一位ITer,B同学,一个行业的,和他们公司既是合作关系,又是竞争关系.最近我们接了该单位的 ...

  5. PHP中文名文件下载实现

    php下载文件的流程: 其实就是给予一个链接:  <a href="指向处理文件的地址"></a> 这样,当前端点击链接的时候,指向处理文件,比如downl ...

  6. [多图]Windows 10 Build 10565今推送：优化界面菜单 Cortana改进

    酷站网软:此前的Windows Build 10558并没有向公众发布,而是直到近日才向Fast Ring用户推送了更多功能和改进的Build 10565版.除之前版本上的加入了Messaging.E ...

  7. Flex布局教程及属性速查

    一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...

  8. luogu1207双重回文数[usaco1.2]Dual Palindromes

    题目描述 如果一个数从左往右读和从右往左读都是一样,那么这个数就叫做“回文数”.例如,12321就是一个回文数,而77778就不是.当然,回文数的首和尾都应是非零的,因此0220就不是回文数. 事实上 ...

  9. poj1273 Drainage Ditches

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 68414   Accepted: 2648 ...

  10. java （基本语法）

    2.五大内存区 方法区就是存储共享数据的地方 3.一个实体多处引用 只有还有实体被指向,这个实体就不能消失.当所有的指向都消失之后,这个实体被视为垃圾,被垃圾回收机制不定期的回收. 堆里的实体能存储多 ...