Ⅰ 如何让图片在网页正中间
<table height="100%" width="100%">
<tr>
<td align="center" valign="middle"><img src="e图片地址“ height="500" width="800"/>
</td>
</tr>
</table>这个方法就可以让图片在浏览器正中间,要是用div就会很麻烦,所以就加了个单元格
Ⅱ 网页设计中如何把比界面大的图片居中
普通浏览器就能做到。正常来讲,这些图都到了你的浏览器,你都能看到,没有不能保存的道理(毕竟超文本传输协议)。但仅限于你看到的图,步骤如下:
1.打开浏览器,打开元素审查功能,不同浏览器不一样,谷歌是按F12,然后选中图片,或者Ctrl+shift+C
2.选择图片后,在代码界面找到src或者img或者href如这个链接
3.然后删掉不必要的部分,黏贴到浏览器回车
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个方法比较满意,兼容性方面不错,使用起来的限制也比较小,还有些方法我也都一一测试过,效果都不理想,在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。
Ⅳ 我有一个网页,在上面放了几张图片,但图片都是在网页的最左边,怎么移到中间QQ99720801,说的清楚些。
额 是你说的不清楚 请你说清楚在来让我们解答。
Ⅳ 在html中怎么让图片显示在中间
右击你的html文件,选择打开方式,然后在你想要插入图片的位置输入:
<img src="图片地址" width="宽度" height="高度"/>
然后刷新一下html网页,或者重新打开一边即可看到你刚插入的图片;
Ⅵ 网页设计中怎样将图片放置于中间
你是说图片放于表格居中吗?
直接选中图片所在的TD单元格,然后DW左下角那里水平对齐方式选择居中对齐就行了
Ⅶ HTML如何把图片放在中间请举例说明
方法有很多
比如<img src="" style="display:block;margin:10px auto;"> 这个意思就是上下边距为10像素,左右边距自动
<div style="text-align:center;"><img src=""></div>这个意思就是div里面的内容居中显示
Ⅷ :使用 css 让网页中的图片居于页面正中
最简单的方法:给图片单独套个div,给div做margin设置就好了,设置用百分比,具体如下
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>图片居正中间__郭凯旗</title>
<style>
html{height:100%;width:100%}
body{height:100%;width:100%}
.d1{width:300px;
height:200px;
background:red;
position:fixed;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-150px;
}
.d1img{width:100%;height:100%}
</style>
</head>
<body>
<divclass="d1">
<imgsrc="1.jpg"/>
</div>
</body>
</html>
<!--至于大小自己调节到合适的就好了-->
效果图如下: