Question

我有一个设置，我试图在屏幕中居中一个div，但div内的图像根据父div宽度进行flex-wrap。

这适用于除Safari之外的所有浏览器向左飘浮;由于居中问题，他们没有工作。我有一个小提琴故障......

<div class="gallery">
    <div class="galleryBlock">
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
        <div class="galleryTile">
            <img src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg" />
        </div>
    </div>
</div>

.gallery {
    text-align: center;
    background-color: green;
}

.galleryBlock {
    width: 585px;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-wrap: wrap; /* flex-wrap not working in Safari*/
    background-color: red;
}
.galleryTile {
    position: relative;
    height: 100px;
    width: 190px;
    overflow: hidden;
    margin: 0 5px 5px 0;
}

任何想法都会很棒！感谢。

Answer 1

检查：
center a block and set its children flex

1.您应始终以px的百分比设置图像的大小。如果它很灵活

width: 100%;
height: 100%;

所以图像可能会随着父母的大小而改变。

2.使用这两个可以设置一个块水平中心。在这种情况下，text-align不合适。

margin-left: auto;
margin-right: auto;

3.set .galleryBlock

display: -webkit-flex; /* Safari */
display: flex;

并设置.galleryTile

-webkit-flex: 1;  /* Safari 6.1+ */
-ms-flex: 1;  /* IE 10 */    
flex: 1;

这是flex tutorial in W3C

flex-wrap在Safari中不起作用并且向左浮动不是一个选项

1 个答案: