The problems in the horizontal play of the pictures of Sun elements in the layout of CSS flex

problem description

because the horizontal center of flex is used, but the picture in my grandson element cannot be centered horizontally

the environmental background of the problems and what methods you have tried

margin,pannding and so on are mostly wet, why is it strange that there is no effect

related codes

/ / Please paste the code text below (do not replace the code with pictures) 

  <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>



CSSstylus
<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: -sharp212121
    .wrapper
      overflow: hidden
      height: 0
      width: 100%
      padding-bottom: 100%
      background: -sharpfff
      //background-position: center
      .gallery-img
        //background: fixed
        width: 100%
        //background-position: center
</style>
The position of the red box in the

picture should show my picture, but because it is a square picture frame formed by using
height: 0
width: 100%
padding-bottom: 100%
, a series of alignment methods I use do not work. There is a css writing method that works, that is, margin-top:XXX is used in
. Gallery-img, but I want to achieve the dynamic sliding switch effect of many pictures in the book here. There will be differences in height between images, so you can"t use it, margin-top:XXX. What if I want to achieve the middle level of img in wrapper?

Css
Mar.29,2021 
.gallery-img{ 
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0; 
}
The root of the

problem is that you assigned wrapper a padding-bottom of 100%! Since there is only padding at the bottom (it is correct to say that there is a discrepancy in the size of the upper and lower padding), it is a bit too difficult for you to want the image to lean vertically in the middle of the overall image only through the flex layout.

you can change padding-bottom: 100% to padding: 100px, 0 , which can solve your problem immediately by setting the upper and lower padding of wrapper to be consistent. Of course, you can also remove padding-bottom, and set an Height value for wrapper, but this may not be in line with your intention.

PS. Know that the reason you use padding-bottom:100% is to display the square with width:100% . If you have to do this, you need to change the structure, give img a div, and wrapper needs to specify box-sizing as border-box. The completion effect is as follows:

clipboard.png

Previous: Seek guidance on the development of face recognition

Next: How to quickly find out what the events of an element of a web page have done?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu