html实现页面中内容居中显示图片,javascript怎么让图片居中显示？

javascript怎么让图片居中显示？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

javascript让图片居中显示的方法

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中文网！！

html实现页面中内容居中显示图片,javascript怎么让图片居中显示？相关推荐

表格中内容过多时采用省略号，鼠标移上去显示全部内容
①设置省略: table td {white-space: nowrap;//规定段落中的文本不进行换行overflow: hidden;//内容会被修剪,并且其余内容是不可见的.text-overf ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
html中两个图片叠放,CSS实现图片叠放（勾选图标）
场景我们经常会遇到这种场景,有一个待选图片列表,在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标,这篇文章就记录实现这个功能的过程. 原理利用flex布局space-around显示图 ...
html5 载入另一个页面,如何将一个html页面中嵌入另一个html页面
将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topm ...
在html页面中引入另一个html页面
我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引 ...
【Figma技巧】如何计算整个页面中的画板数量
我们知道,可以打开Resource use显示资源的使用情况,包括整个项目中的图层数量和内存占用率. 那么,有没有方法可以查看画板数量,或者说做了个多少张图? 通过和群里大神的讨论,总结了以下几种方法 ...
webuploader多图片 php,php+WebUploader图片批量上传
一.webuploader webuploader主要用来做文件的上传,支持批量上传和图片预览,图片预览是将图片生成base64数据直接在标签中使用,所以能够达到的效果是未真正上传图片可以先看到上传 ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...
如何实现标签元素在HTML页面中居中显示
如何实现标签元素在HTML页面中居中显示在HTML页面设计中常常需要实现标签元素在HTML页面中居中显示,相关知识点较多也较杂乱,本文试图介绍一些比较基本与实用的相关知识. 使用标签的align属性 ...

html实现页面中内容居中显示图片,javascript怎么让图片居中显示？

html实现页面中内容居中显示图片,javascript怎么让图片居中显示？相关推荐

最新文章

热门文章