中心网格项目
Center grid items
我根据在以下位置找到的教程设置了网格：https://allurewebsolutions.com/implement-masonry-isotope-infinite-scroll-imagesloaded-wordpress
基本上，脚本将我的帖子排列在一个网格上，然后当我点击项目时，我会转到它的永久链接：https://elpasobaseballhalloffame.org/inductees/
该脚本反应灵敏，它适应不同的屏幕尺寸，并且只显示适合 window 的内容，效果很好。
我想做一个小调整...我怎样才能让项目居中，这样如果它只能容纳一两个项目，它们不是左对齐的，它们就会在页面上居中？
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:
ul#grid {
margin: 0 0 0 20px;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 10px 30px;
max-width: 257px;
}
#grid img {
height: auto;
width: 257px;
}
#grid .caption {
background: #ccc;
}
#grid h3 {
color: #aa1c29;
font-family: 'Graduate', cursive;
font-size: 25px;
line-height: 30px;
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: 14px;
font-weight: 400;
margin-top: 10px;
padding: 5px 10px 2px;
text-align: right;
text-transform: uppercase;
}
#grid .nav a {
display: none;
}
所有定位由JS控制，可用：https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.3/imagesloaded.min.js
我创建了一个图形来显示我所追求的：https://ibb.co/nF0Fxc
有人知道需要更改哪些内容才能使这些项目在页面上居中吗？
谢谢，
乔什
所以，
在 e-mailing 代码作者之后，我听从了他的建议，我将我的 margins\list 项目百分比而不是特定值...这为网格提供了最大的灵活性，同时允许页面可以很好地缩放。
我有断点，允许我的列从 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;
}
}
所以，我正在做的是调整边距，使所有内容都符合给定 window。页边距和列表项的百分比控制着网格并允许缩放页面而不显示我最初拥有的所有白色 space。这与我在该站点上使用的图片库的行为相匹配，因此对我来说是一个很好的解决方案。
谢谢，
乔什
我根据在以下位置找到的教程设置了网格：https://allurewebsolutions.com/implement-masonry-isotope-infinite-scroll-imagesloaded-wordpress
基本上，脚本将我的帖子排列在一个网格上，然后当我点击项目时，我会转到它的永久链接：https://elpasobaseballhalloffame.org/inductees/
该脚本反应灵敏，它适应不同的屏幕尺寸，并且只显示适合 window 的内容，效果很好。
我想做一个小调整...我怎样才能让项目居中，这样如果它只能容纳一两个项目，它们不是左对齐的，它们就会在页面上居中？
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:
ul#grid {
margin: 0 0 0 20px;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 10px 30px;
max-width: 257px;
}
#grid img {
height: auto;
width: 257px;
}
#grid .caption {
background: #ccc;
}
#grid h3 {
color: #aa1c29;
font-family: 'Graduate', cursive;
font-size: 25px;
line-height: 30px;
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: 14px;
font-weight: 400;
margin-top: 10px;
padding: 5px 10px 2px;
text-align: right;
text-transform: uppercase;
}
#grid .nav a {
display: none;
}
所有定位由JS控制，可用：https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.3/imagesloaded.min.js
我创建了一个图形来显示我所追求的：https://ibb.co/nF0Fxc
有人知道需要更改哪些内容才能使这些项目在页面上居中吗？
谢谢，
乔什
所以，
在 e-mailing 代码作者之后，我听从了他的建议，我将我的 margins\list 项目百分比而不是特定值...这为网格提供了最大的灵活性，同时允许页面可以很好地缩放。
我有断点，允许我的列从 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;
}
}
所以，我正在做的是调整边距，使所有内容都符合给定 window。页边距和列表项的百分比控制着网格并允许缩放页面而不显示我最初拥有的所有白色 space。这与我在该站点上使用的图片库的行为相匹配，因此对我来说是一个很好的解决方案。
谢谢，
乔什