web页面开发过程中让图片垂直居中的三种方法

来源：互联网发布：java的switch里的编辑：程序博客网时间：2024/05/17 02:44

<pre name="code" class="html"><!doctype html><html lang="en"><head><meta charset="UTF-8"><title>图片居中</title><style>     *{     padding:0;     margin:0;     }     /*方法一*//*     .view{     width: 600px;     height: 600px;     border:1px solid red;     text-align: center;     display: table-cell;     vertical-align: middle;     }*/     /*方法二*//*     .view{     width: 600px;     height: 600px;     border:1px solid red;     text-align: center;     }     .view img{     vertical-align: middle;     }     .view span{     height: 100%;     width:0;     display: inline-block;     vertical-align: middle;     }*/     /*方法三*/     .view{     width: 600px;     height: 600px;     border:1px solid red;     background: url(images/1.jpg) no-repeat;     background-position: 50% 50%;     }</style></head><body><!--图片大小为400*300     方法一:在view中加display:table-cell;vertical-align:middle样式;     方法二:在img标签后加span标签,并给它如上所示的样式，img还须加vertical-align;middle样式;     决定行高的是行内最高的元素的值:span的height:100%;     方法三:背景法,就是让图片当做div背景，然后再调整背景的位置使之在中间位置    --><!-- <div class="view"><img src="images/1.jpg" alt=""></div><div class="view"><img src="images/1.jpg" alt=""><span></span></div> --><div class="view"></div></body></html>

0 0