有的时候我们会遇到这样一个问题，就是当我们按下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. http状态码详细说明

    100     客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在请求完 ...

  2. android 滑动滚动条调节音量

    利用滚动条滑动控制音量: 定义: private SeekBar mseekBarvolume: 以下实现代码: //调节音量--begin------------------------- //音量 ...

  3. 【转】最长回文子串的O(n)的Manacher算法

    Manacher算法 首先:大家都知道什么叫回文串吧,这个算法要解决的就是一个字符串中最长的回文子串有多长.这个算法可以在O(n)的时间复杂度内既线性时间复杂度的情况下,求出以每个字符为中心的最长回文 ...

  4. NOIP水题合集[3/未完待续]

    NOIP2008pj传球游戏 题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球, ...

  5. AC日记——单词倒排 1.7 28

    28:单词倒排 总时间限制:  1000ms 内存限制:  65536kB 描述 编写程序,读入一行英文(只包含字母和空格,单词间以单个空格分隔),将所有单词的顺序倒排并输出,依然以单个空格分隔. 输 ...

  6. JS读取写入删除COOKIE的各种操作

    1. .NET后置代码中获取 Response.Redirect("http://www.baidu.com?id=" +Request.Cookies["size&qu ...

  7. 逗号分隔的字符串转换为行数据（collection）

    逗号分隔的字符串转换为行数据(collection) CREATE OR REPLACE FUNCTION "GET_STR_TAB" (v_str in varchar2) re ...

  8. HTML 学习笔记(列表)

    HTML 列表 html中列表使用标签<ul>和 <ol>来实现,不同的行用标签<li>来实现 <li>中包含的就是列表每行的内容.列表包含有序列表&l ...

  9. slice,substr和substring的区别

    首先,他们都接收两个参数,slice和substring接收的是起始位置和结束位置(不包括结束位置),而substr接收的则是起始位置和所要返回的字符串长度.直接看下面例子: var test = ' ...

  10. Js多国时间动态更新

    Js多国时间动态更新 点击下载