html如何设置图片居中
程序员文章站
2022-03-14 13:13:32
...
在html中,使用margin属性设置图片居中,只需要给图片元素设置“margin:auto”样式即可。当margin属性值为“auto”时,浏览器会自动分配左右边距,使元素平均分配占用父级容器的左右边距,达到元素居中的目的。。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在Body标签下建立img标签,将图片插入到文档中,现在可以看到图片在浏览器的左上角显示,现在这里引用的图片大小为200*125px
<img src="img/1.jpg" alt="图片">
可以在img外建立div块状标签,然后对div设定宽度,将文件居中设置 margin:0 auto;
<div> <img src="img/1.jpg" alt="图片"> </div>
还可以将图片设置为相对定位,然后对其以百分比的方式将其居中,
div{ position:relative; left:50%; }
在浏览器中预览效果,因为设置的的是距离左侧50%的距离,所以现在的图片左侧位置在文档中的居中位置,
如果将图片正中心居中,就需要将图片向左侧移动图片宽度一半的距离,所以一定要知道图片的大小才可以,现在这张图片大小为200*125,所以讲图片框向左移动100px即可,因为向外侧移动,所以给负值 left:-100px;最后效果如图,已经将图片居中对齐,这样设置后,不管屏幕多大,图片都是在居中位置。
div{ position:relative; left:50%; margin-left: -100PX; }
推荐学习:html视频教程
以上就是html如何设置图片居中的详细内容,更多请关注其它相关文章!
推荐阅读
-
CSS制作图片水平垂直居中_html/css_WEB-ITnose
-
如何设置网页中的一段文字,使它的宽度是页面宽度的62%且能自动换行?_html/css_WEB-ITnose
-
CSDN-markdown编辑器怎么设置图片大小 图片居中
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
如何屏蔽这样的下载 请高人点拨一下,问题有图片_html/css_WEB-ITnose
-
如何让网页中图片等待5秒再显示_html/css_WEB-ITnose
-
如何在VS2008中将背景图片拉伸至整张页面而不是平铺_html/css_WEB-ITnose
-
css图片响应式+垂直水平居中2_html/css_WEB-ITnose
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose