以后地位:首页 > 建站常识 > 列表

CSS 巨细不肯定图片垂直居中

点击: 次时候:2018/4/2关头词:上海网页设想
若是只是程度标的目的居中的话,用text-align:center;(火狐顶用margin:0 auto;)这个属性便能够了。可是,垂直标的目的的居中仿佛很难做到,不管是用css里的"vertical-align:middle;",仍是用img的align="abs

巨细不肯定图片垂直居中

若是只是程度标的目的居中的话,用text-align:center;(火狐顶用margin:0 auto;)这个属性便能够了。可是,垂直标的目的的居中仿佛很难做到,不管是用css里的"vertical-align:middle;",仍是用img的align="absmiddle",图片在垂直标的目的仿佛都无动于中。

发明了以下一个方式,做个保藏。

款式局部:

.middle-out{

      width: 600px;

      height: 385px;

      position: relative;

      display: table-cell;

      vertical-align: middle;

      text-align:center;

      border: 1px solid #f00;

}

.middle-in{

      position: static;

      *position:absolute;

      top:50%;

}

.middle-out .middle-in  img{

      position:static;

      *position:relative;

      top:-50%;

      left:-50%;

}

HTML局部:

<div class="middle-out">

  <div class="middle-in">

         <img src="http://3djiangyin.com/image/logo.jpg" />

    </div>

</div>

预定建站
收费供给网站优化
支付关头词