如何在 网格中调整图像和文本的大小和居中?

I have this code:

我有这段代码:

<div>
 <ul class="g">
  <li><a href="/go.html?url=proj1.html"><img src="img/prev1.jpg" /></a><p>Only God Forgives</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev2.jpg" /></a><p>Place To be</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev3.jpg" /></a><p>Smokey Taboo</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev4.jpg" /></a><p>Pagan Poetry</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev1.jpg" /></a><p>Into The Wild</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev2.jpg" /></a><p>Mad G Wine</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev3.jpg" /></a><p>Milk And Beach</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev4.jpg" /></a><p>Song To The Siren</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev1.jpg" /></a><p>Where The Wild Things Are</p></li>
  <li><a href="/go.html?url=proj1.html"><img src="img/prev2.jpg" /></a><p>At Night in Dreams</p></li>
</div>


.g {
  margin: 2%;
}
.g li {
  float: left;
  margin: 0.5%;
  text-align: center;
  background-color: yellow;
  height: 100px;
  width: 100px;
}
.g img {
  width: 100px;
  height: 100px; }
<div>
 <ul class=