有的时候我们会遇到这样一个问题，就是当我们按下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. 生成bat文件及sh文件

    ---windows下cmd执行java文件1.将project程序打成jar包2.新建文件夹--新建.bat文件3.bat文件内容:(config配置文件--lib用到的jar包,包括1的jar包) ...

  2. android ListView 和 BaseAdapter 应用

    步聚: 1.建立ListView对象:--(作用:绑定Adapter呈现数据) 2.建立ListView实现的Item栏位.xml布局:--(作用:实现ListView的栏位布局) 3.建立Item. ...

  3. 如何生成可变表头的excel

    1.实现功能: 传入一个表头和数据,将数据导入到excel中. 为了便于项目的扩展,数据传入通过泛型集合传入,获取数据时,通过反射的方式获取,这样无论你的表头是多少项,我都能很方便的生成.另外为了便于 ...

  4. Stanford机器学习笔记-7. Machine Learning System Design

    7 Machine Learning System Design Content 7 Machine Learning System Design 7.1 Prioritizing What to W ...

  5. Google类VR设备知识

    前言 本文所指的google类vr设备是指: 谷歌的Cardboard.三星Gear VR.暴风魔镜等这样的手机VR盒子,而并不是HTC Vive这类. 人眼立体感知能力 人的左右眼看到的东西是有差别 ...

  6. MYSQL基础知识总结

    !注释方式 #    --    单行 /*     */  多行 1.SELECT  column1,column2,column3  FROM tablename WHERE id <= 5 ...

  7. 使用uboot的tftp下载bootloader、内核、文件系统

    开发板 jz2440 下载uboot.bin tftp 0x30000000 u-boot.bin nand erase bootloader nand write bootloader 下载内核 t ...

  8. Hoj2634 How to earn more?

    How to earn more My Tags   (Edit)   Source : ww   Time limit : 1 sec   Memory limit : 64 M Submitted ...

  9. 一个screen的简单配置。。

    # Start message startup_message off defencoding utf- encoding utf- utf- shell bash hardstatus always ...

  10. js/jquery判断浏览器的方法小结

    在网站前端开发中,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把 ...