當前位置:首頁 > 建站常識 > 列表

CSS 大(dà)小不确定圖片垂直居中

點擊:時(shí)間:2018/4/2關鍵詞:上海網頁設計
如果隻是水(shuǐ)平方向居中的(de)話(huà),用(yòng)text-align:center;(火狐中用(yòng)margin:0 auto;)這(zhè)個(gè)屬性就可(kě)以了(le)。但是,垂直方向的(de)居中好像很難做(zuò)到,無論是用(yòng)css裏的(de)"vertical-align:middle;",還(hái)是用(yòng)img的(de)align="abs

大(dà)小不确定圖片垂直居中

如果隻是水(shuǐ)平方向居中的(de)話(huà),用(yòng)text-align:center;(火狐中用(yòng)margin:0 auto;)這(zhè)個(gè)屬性就可(kě)以了(le)。但是,垂直方向的(de)居中好像很難做(zuò)到,無論是用(yòng)css裏的(de)"vertical-align:middle;",還(hái)是用(yòng)img的(de)align="absmiddle",圖片在垂直方向似乎都無動于衷。

發現了(le)如下(xià)一個(gè)方法,做(zuò)個(gè)收藏。

樣式部分(fēn):

.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部分(fēn):

<div class="middle-out">

  <div class="middle-in">

         <img src="/image/logo.jpg" />

    </div>

</div>

預約建站
免費提供網站優化(huà)
領取關鍵詞