在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ CSS flex布局 孫元素圖片的水平劇中問(wèn)題

CSS flex布局 孫元素圖片的水平劇中問(wèn)題

問(wèn)題描述

由于使用了flex的水平居中，但是我孫元素里的圖片不能水平居中

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

margin，pannding等等放大都濕了，為什么沒(méi)有效果奇怪

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）

  <div class="container">
    <div class="wrapper">
          <img class="gallery-img" src="http://img1.qunarzz.com/sight/p0/1711/b6/b6dcb80ed40dedbfa3.img.jpg_r_800x800_fcce5c48.jpg" alt="">
    </div>
  </div>



CSS我用的stylus寫(xiě)的
<style lang="stylus" scoped>
  .container
    display: flex
    flex-direction: column
    justify-content: center
    z-index: 99
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #212121
    .wrapper
      overflow: hidden
      height: 0
      width: 100%
      padding-bottom: 100%
      background: #fff
      //background-position: center
      .gallery-img
        //background: fixed
        width: 100%
        //background-position: center
</style>

圖片中的紅框位置應(yīng)該要出現(xiàn)我的圖片才對(duì)，但是因?yàn)槭鞘褂?br>height: 0
width: 100%
padding-bottom: 100%
形成的正方形圖片框，所以我使用的一系列對(duì)齊方式都不起作用，有個(gè)css寫(xiě)法面前起作用，就是
.gallery-img 里面使用margin-top:XXX ，但是我這里要實(shí)現(xiàn)的書(shū)很多圖片的動(dòng)態(tài)滑動(dòng)切換效果，圖片之間高度會(huì)有差別，所以不能使用，margin-top:XXX 那我想實(shí)現(xiàn).wrapper里img的水平居中應(yīng)該怎么辦呢？？？
圖片描述

回答
編輯回答
怣人

問(wèn)題的根源在于你給wrapper指定了 padding-bottom為 100%！既然只有底部有padding（正確說(shuō)法應(yīng)該是上下padding大小不一致），你想讓圖片只通過(guò)flex布局設(shè)定往整體垂直中間靠，有點(diǎn)太難為圖片了。

你可以將 padding-bottom: 100% 改為 padding: 100px, 0，即將wrapper的上下padding設(shè)為一致即可立刻解決你的問(wèn)題。 當(dāng)然了，也可以去掉padding-bottom，給wrapper設(shè)定一個(gè)Height值，不過(guò)這可能與你的意圖不符了。

PS. 知道你用 padding-bottom:100%的原因是想搭配width:100%實(shí)現(xiàn)展示正方形的效果，你非要這么做的話(huà)，就需要改變結(jié)構(gòu)，給img外再套一個(gè)div， 并且wrapper需要特別指定 box-sizing為 border-box。完成效果如下：

clipboard.png

2018年7月11日 21:35
編輯回答
還吻
.gallery-img{ 
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0; 
}
2018年8月17日 07:42