制作网页如何图片居中

1. 网页设计中如何把比界面大的图片居中

普通浏览器就能做到。正常来讲，这些图都到了你的浏览器，你都能看到，没有不能保存的道理（毕竟超文本传输协议）。但仅限于你看到的图，步骤如下：
1.打开浏览器，打开元素审查功能，不同浏览器不一样，谷歌是按F12，然后选中图片，或者Ctrl+shift+C
2.选择图片后，在代码界面找到src或者img或者href如这个链接
3.然后删掉不必要的部分，黏贴到浏览器回车
4.这张图片就可以右键另存为啦
注意事项：
如果网站一开始给的就是缩略图或者不是高清的图，只做展示用，那么久下载到的还是不高清的图，换句话说，对一些做设计的人想找原图还是找不到的。

2. 在网页设计中怎么让背景图片水平居中

background:url(bg.jpg)
no-repeat
center
center;
:no-repeat为背景图不重复，最好是满足1280宽度的分辨率下位满屏，图片可以宽度为1280像素，第一个center为水平居中，第二个center为垂直居中，第二个center换成top也就是顶部显示背景图。

3. 在网页设计中怎么让背景图片水平居中

CSS使网页背景图片居中的三种方法。
1、第一种：用像素设定，很多都用这种，但是也是最麻烦的：
2、第二种：用50%设定，很方便。
3、第三种：用center设定（注：第2个center可以省略，因为默认就是center）。

4. 网页制作图片怎么居中

图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。

下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。

但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器都会有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。

HTML结构部分：

<div id="box">
<span><img src="images/demo.jpg" alt=""></span>
</div>

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional)：

方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*针对IE6/7的Hack*/
top:50%; /*针对IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*针对IE6/7的Hack*/
top:-50%;left:-50%; /*针对IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。

方法三 (XHTML 1.0 strict)：

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。

HTML结构部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->

方法三也同样适用XHTML 1.0 transitional。以上方法都是收集于网页教学网，暂时只对这3个方法比较满意，兼容性方面不错，使用起来的限制也比较小，还有些方法我也都一一测试过，效果都不理想，在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。

5. 网页设计让图片居中

添加style属性margin:0 auto;

6. 怎么让一张图片在网页中居中显示

可以用“margin: 0 auto;”和“text-align: center;”是图片在网页中居中。

1、新建html文档，在body标签中添加div标签，然后在div标签中添加img标签：

7. html中怎样让插入的图片居中

一般来说可以用CSS中的“text-align:center属性，margin:0 auto或定位属性”就可以居中。但是主要看是看你的页面布局是怎样的，是否用了定位

1、img标签中的align属性不是定义图像的位置，而是定义图像与周围文字的位置，并且不推荐使用这个属性。

2、要给img定义一个父标签，让这个父标签里面的内容居中，那么img自然就居中了。

比如说：<p align="center">img……</p>

8. 网页设计教程：怎么让页面居中显示

页面居中对齐的方式有很多种实现方法。下面，我们来看看怎么让页面居中显示吧。

• 01

  新建html页面
  首先打开visual studio软件，然后新建一张HTML页面，如下图所示：

• 02

  main
  然后创建一个div，名称为main，随便写上一些文字，如下图所示：

• 03

  居中对齐
  然后对body主题设置样式，代码为body{ margin:0 auto;width:780px;}如下图所示：

• 04

  预览效果
  在浏览器中的预览效果如下图所示：

9. 在dreamweaver 中怎么使图片居中

图片居中常用的有两种方法：
1、对img标签的父标签添加一个居中代码（也就是text-align:center）
2、给img的父标签添加一个宽度，然后给img标签添加一个（margin:0 auto;）当然还必须给img标签添加一个宽度或者是将他设置成块元素（diplay:block）

如果你是在表格中添加img那就只需要给td添加一个居中代码（text-align:center）就可以了。但是你不要对img添加别的东西，比如浮动什么的。