html - 中心列表随着屏幕宽度的变化

Question

我有一个无序列表，其中包含一些圆形图像。圆圈的宽度设置为 350 像素并向左浮动，因此当您缩放时，一行中的图像数量会发生变化。我想要的是，如果图像右侧有间隙(图像与宽度不完全吻合)，那么图像将全部居中。我试过在某些地方放置自动边距，但它不起作用。我在下面包含了一些图片来帮助解释:

Here is what the images look like when the don't match the width

Here is what i would wan't it to look like (I made this with an image editor)

下面是我的代码:

HTML:

<div class="main">
<div class="gallerydisplay">
    <ul>
        <li><div class="circleoutline"><img src="http://kerivillage.com/wp-content/uploads/2015/11/spa.candles.keri_.village.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.faroairporttransfersalgarve.com/app/webroot/blog/wp-content/uploads/2015/05/spa.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.myholidayguru.co.uk/wp-content/uploads/2014/09/wellness-candles-stones-flowers-spa-748x498.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://static1.squarespace.com/static/52291225e4b0af57b790b008/t/522b641fe4b04c838fabf7b1/1378575396909/spa-still-life.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.lemassagerb.com/or-spa-sliderimage.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.pampermetanninganddayspa.com/Spa%20(1).jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.tapatiocliffshilton.com/interactive/top_spa2.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.spa-tara.com/wp-content/uploads/2012/08/candles1.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.theconistonhotel.com/userfile/spa/couples-massage.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://cologne.regency.hyatt.com/hyatt/images/hotels/colog/spa_signature.jpg.pagespeed.ce.o6UsOTF7Ab.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="https://static.mgmresorts.com/content/dam/MGM/mgm-grand/spa-and-salon/grand-spa-&-health-club/architecture/mgm-grand-amenities-spa-lifestyle-woman-facial-mask-@2x.jpg.image.550.325.high.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.kidayspa.co.uk/wp-content/uploads/2012/05/Spa-Day-Banner2.png" height="100%"></div></li>
        <li><div class="circleoutline"><img src="https://pixabay.com/static/uploads/photo/2015/03/23/17/43/relaxation-686392_960_720.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.cadburyhotelbristol.co.uk/assets/media/images/boxes/Spa-Things.gif" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.lcc-transarabiandubai.com/image/static/AE1135/files/-1448431703223/spa.jpg" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.omnihotels.com/-/media/images/globals/spa/massage-couples-166668375.jpg?h=660&la=en&w=1170" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.omnihotels.com/-/media/images/globals/spa/honey-144285723.jpg?h=660&la=en&w=1170" height="100%"></div></li>
        <li><div class="circleoutline"><img src="http://www.bbcgoodfood.com/sites/default/files/glossary/banana-crop.jpg" height="100%"></div></li>
    </ul>
</div>

CSS:

    .gallerydisplay
{
    margin-top: 5vh;
    width: 100%;
    clear: both;
}

.gallerydisplay ul
{
    margin: auto;
    padding: 0;
    text-align: center;
}

.gallerydisplay li
{
    display: block;
    float: left;
    width: 350px;
    margin: 1%;
    height: 350px;
    transition: transform 0.4s;
    box-shadow: 0.2vh 0vh 0.8vh #888888;
    border-radius: 50%;
    overflow: hidden;
}

.circleoutline
{
    width: 95%;
    height: 95%;
    margin: auto;
    position: relative;
    top: 2.3%;
    border-radius: 50%;
    overflow: hidden;
}

Answer 1

可以设置li元素显示inline-block，去掉左边的float。因为您的有序列表是使用文本居中对齐设置样式的，所以 li 将在其中居中。您的 CSS 将变为:

.gallerydisplay ul{
  margin: auto;
  padding: 0;
  text-align: center;
}

.gallerydisplay li{
  display: inline-block;
  width: 350px;
  margin: 1%;
  height: 350px;
  transition: transform 0.4s;
  box-shadow: 0.2vh 0vh 0.8vh #888888;
  border-radius: 50%;
  overflow: hidden;
}