• 技术文章 >web前端 >js教程

    javascript如何设置图片居中

    青灯夜游青灯夜游2022-01-19 11:47:32原创69

    方法:1、用div和span包裹图片;2、用setAttribute()给其添加“display:table;text-align:center”和“display:table-cell;vertical-align:middle;”样式。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript设置图片居中的方法:

    搭建一个HTML框架

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			div {
    				width: 500px;
    				height: 200px;
    				border: green solid 1px;
    			}
    		</style>
    	</head>
    	<body>
    
    		<div id="app">
    			<span id="img">
    				<img src="img/1.jpg" width="200" />
    			</span>
    		</div>
    	</body>
    </html>

    1.png

    使用setAttribute()方法添加图片居中样式

    var div=document.getElementById("app");
    var img=document.getElementById("img");
    div.setAttribute("style","display:table;text-align: center;");
    img.setAttribute("style","display:table-cell;vertical-align: middle;");

    2.png

    【相关推荐:javascript学习教程

    以上就是javascript如何设置图片居中的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 图片居中
    上一篇:javascript能增加标签吗 下一篇:javascript怎么改变图片地址

    相关文章推荐

    • javascript怎么实现鼠标悬停变色效果• javascript如何判断是否包含指定字符串• javascript怎么求1-n的和• JavaScript怎么改变网页背景颜色• javascript怎么获取数组前几位元素

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网