css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

html-css022

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中,第1张

1、第一种css代码如图所示。display设置成table-cell,text-align为center,垂直居中设置vertical-align为middle。

2、打开浏览器查看结果,图片已处于正中状态。

3、第二种方法css代码如图。div设置成相对定位,img设置成绝对定位,然后left:50%,top:50%,此时图片的左上角将位于div的中心。重点:图片向上移动图片高度的一半,并向左移动图片宽度的一半。正好为与div正中间。

4、在浏览器查看结果,图片水平,垂直均居中。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:img {position: absolutetop: 100pxleft: 200px}。

3、浏览器运行index.html页面,此时通过css实现了图片的绝对定位,距离左侧100px,顶部200px,不随网页大小而变化。

absolute绝对固定 , 一般都有个父元素 里面有个relative相对固定,这时候就是相对父元素定位,比如top:10px 就是相对父元素 上部预留10px的高度。 如果没有父元素 就是相对游览器定位 top 就是顶部距离父元素 多高。css中常见的定位 。