居中网格项目

所以

在给代码作者发了电子邮件后,我遵循了他的建议,并将我的边距\列出项目百分比而不是具体值。。。这为网格提供了最大的灵活性,同时允许页面很好地扩展。

我有断点,允许我的列从4变为3变为2,因为边距会相应地调整,所以效果很好!

html输出没有更改,看起来仍然像:

<ul id="grid" style="position: relative; height: 2174px;">
    <li style="position: absolute; left: 0px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/al-silva/"><img width="218" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-258x355.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-291x400.jpg 291w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-196x270.jpg 196w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva.jpg 317w" sizes="(max-width: 218px) 100vw, 218px"><div class="caption"><h3>Al Silva</h3><p>Inducted in 2000 Started his playing days at the Dan Ponder Little League...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 277px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alan-zinter/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Alan Zinter</h3><p>Inducted in 2009 Four year letterman for Hanks High School All District and...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 554px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alberto-mendez/"><img width="198" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez-178x270.jpg 178w" sizes="(max-width: 198px) 100vw, 198px"><div class="caption"><h3>Alberto (Beto) Mendez</h3><p>Inducted in Original Hall of Fame Class of 1988 Started playing in the...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 831px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-gutierrez/"><img width="201" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-258x384.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-268x400.jpg 268w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-181x270.jpg 181w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez.jpg 590w" sizes="(max-width: 201px) 100vw, 201px"><div class="caption"><h3>Alex Gutierrez</h3><p>Inducted in 2006 Alex Gutierrez was the soul of baseball in the Lower...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 277px; top: 388px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-villalobos/"><img width="206" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-258x375.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-276x400.jpg 276w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-186x270.jpg 186w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos.jpg 321w" sizes="(max-width: 206px) 100vw, 206px"><div class="caption"><h3>Alex Villalobos Jr.</h3><p>Inducted in 1993 Started his baseball career at the age of 16 in...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 0px; top: 577px;"><a href="https://elpasobaseballhalloffame.org/inductee/alonso-beltran/"><img width="205" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-698x1024.jpg 698w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-258x379.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-272x400.jpg 272w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-184x270.jpg 184w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran.jpg 735w" sizes="(max-width: 205px) 100vw, 205px"><div class="caption"><h3>Alonso Beltran</h3><p>Inducted in 2013 1989 and 1990 All District and All City selection for...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 831px; top: 606px;"><a href="https://elpasobaseballhalloffame.org/inductee/alton-stelley/"><img width="82" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-279x1024.jpg 279w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-258x948.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-109x400.jpg 109w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley.jpg 360w" sizes="(max-width: 82px) 100vw, 82px"><div class="caption"><h3>Alton Lawrence “Larry” Stelley</h3><p>Inducted in 2009 Leading hitter and pitcher on league champion Big 8 Food...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 554px; top: 637px;"><a href="https://elpasobaseballhalloffame.org/inductee/andre-rabouin/"><img width="286" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-258x271.png 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-381x400.png 381w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-257x270.png 257w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-16x16.png 16w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin.png 537w" sizes="(max-width: 286px) 100vw, 286px"><div class="caption"><h3>Andre C. Rabouin</h3><p>Inducted in 1998 Born in Bronxville, New York Played baseball at Andress High...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 277px; top: 985px;"><a href="https://elpasobaseballhalloffame.org/inductee/andrew-cohen/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg 263w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-258x387.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-180x270.jpg 180w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Andrew “Andy” Cohen</h3><p>Inducted in Original Class of El Paso Baseball Hall of Fame in 1988...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 554px; top: 1154px;"><a href="https://elpasobaseballhalloffame.org/inductee/andy-morales/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Andy Morales</h3><p>Inducted in 2008 Played baseball four years at Bowie High School under legendary...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 0px; top: 1178px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-sambrano/"><img width="202" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-258x383.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-269x400.jpg 269w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-182x270.jpg 182w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano.jpg 322w" sizes="(max-width: 202px) 100vw, 202px"><div class="caption"><h3>Armando “Sam” Sambrano</h3><p>Inducted in 1992 Started playing baseball at the age of 12 in 1933...<span>Read More </span></p></div></a></li>
    <li style="position: absolute; left: 554px; top: 1565px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-almanza/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-258x388.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-266x400.jpg 266w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-180x270.jpg 180w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza.jpg 500w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Armando Almanza</h3><p>Inducted as part of the 2012 El Paso Baseball Hall of Fame Silver...<span>Read More </span></p></div></a></li>
    <div class="nav"><a href="https://elpasobaseballhalloffame.org/inductees/page/2/">Next Page »</a></div>
</ul>

CSS:

/* Grid */
#grid img {
    height: auto;
    width: 100%;
}

#grid .caption {
    background: #ccc;
}

#grid .term {
    background-color: #ffffcc;
    border-radius: 2px;
    display: inline;
    margin: 0 2px;
    padding: 2px 4px;
}

#grid h3 {
    color: #aa1c29;
    font-family: 'Graduate', cursive;
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 5px !important;
    padding: 20px 10px 5px;
    text-align: center;
}

#grid p {
    color: #054872;
    font-size: 18px;
    font-weight: 400;
    padding: 15px 10px;
}

#grid a {
    text-decoration: none;
}

#grid span {
    background: #fff;
    border-right: 2px solid #cb2020;
    color: #cb2020;
    display: block;
    font-family: "Ionicons", 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
    padding: 5px 10px 2px;
    text-align: right;
    text-transform: uppercase;
}

#grid .nav a {
    display: none;
}

/* Media */
@media screen and (max-width: 600px) {
    ul#grid {
        margin: 0 3%;
        padding: 0 !important;
    }
    #grid li {
        list-style-type: none;
        margin: 0 3% 30px;
        max-width: 44%;
    }
}
@media screen and (min-width: 601px) and (max-width: 849px) {
    ul#grid {
        margin: 0 2%;
        padding: 0 !important;
    }
    #grid li {
        list-style-type: none;
        margin: 0 2% 30px;
        max-width: 29.37%;
    }
}
@media screen and (min-width: 850px) {
    ul#grid {
        margin: 0 1.16%;
        padding: 0 !important;
    }
    #grid li {
        list-style-type: none;
        margin: 0 1% 30px;
        max-width: 23%;
    }
    #grid a:hover span {
        background: #eee;
    }
    #grid img:hover {
        opacity: 0.95;
    }
}

所以,我所做的是调整边距,使所有内容都符合给定的窗口。页边距和列表项上的百分比控制着网格,允许在不显示我最初拥有的所有空白的情况下缩放页面。这与我在该网站上使用的图片库的行为相匹配,所以这对我来说是一个很好的解决方案。

谢谢
乔希