html实现页⾯中内容居中显⽰图⽚,javascript怎么让图⽚居中
显⽰？
javascript怎么让图⽚居中显⽰？下⾯本篇⽂章给⼤家介绍⼀下。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对⼤家有所帮助。
javascript让图⽚居中显⽰的⽅法
jquery在线图片
1、准备⼀个图⽚，如图，我将图⽚放到了和HTML同级⽬录中
2、编写HTML⽂件，如代码所⽰，写了⼀个div，在style中设置了div的边框，宽度⾼度等，在div中添加⼀个图⽚标签img
3、页⾯显⽰结果如图所⽰
4、现在我们来实现图⽚⽔平居中，代码如下，其中text-align: center；的意思是将div中的内容排列到中间，vertical-align: middle；的意思是将元素放在⽗元素中部
5、页⾯显⽰结果如下
6、然后将图⽚设为⽔平垂直居中，代码如下，其中display: table；的意思是将div作为块级表格来显⽰，display: table-cell；的意思是将图⽚span标签作为⼀个表格单元格来显⽰
7、页⾯显⽰结果如图
8、如果要使⽤js将图⽚居中的话，就引⼊jQuery，再在JavaScript中添加代码$('.app').css({'display':'table', 'text-align':'center'});
$('.img').css({'display':'table-cell', 'vertical-align':'middle' });
就可以了，效果和上⾯是⼀样的
更多web前端开发知识，请查阅 HTML中⽂⽹ ！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。