html图片居中html图片居中代码

2024-07-11 02:27:49 浏览

图片水平垂直居中情况很多,最简单的办法是吧图片设置为背景,给背景设置background-position:center;如果只能用图片分两种情况:

html图片居中html图片居中

1.图片宽高固定,这种情况很简单。水平居中:就在图片的CSS中加 dispaly:block;margin:0 auto;垂直居中:自己算出(div的高度-图片的高度)/2,得到margin-top值即可。

2.图片高度未知,这个布局比较难实现。一般我是用js做的。水平居中:同上,在图片的css中加 dispaly:block;margin:0 auto;垂直居中:用js算出(div的高度-图片的高度)/2,得到margin-top值赋给它。曾经研究过网上的很多方法,个人觉得这个是最有效的了。

首先我们需要新建一个html页面。

在浏览器中查看效果,可以发现图片是默认左对齐的,并没有在正中央显示。

可以使用margin 0 auto进行居中,或者使用绝对定位,再使用边定位至中间

使用css代码即可,background-size:cover。更改html网页输入框的宽度和高度:

如果图片左浮动并且"display:inline"时,只要给图片设置一个"text-align:center"属性,就解决了水平居中。使用display:table-cell和设置了display:inline-block的线合span,这样就解决垂直居中。

本文版权声明本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系本站客服,一经查实,本站将立刻删除。