title: How to resize and center an image and text on <li> grid?
body: <p>I have this code:</p>
  
  <pre><code>&lt;div&gt;
   &lt;ul class="g"&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev1.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Only God Forgives&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev2.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Place To be&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev3.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Smokey Taboo&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev4.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Pagan Poetry&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev1.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Into The Wild&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev2.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Mad G Wine&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev3.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Milk And Beach&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev4.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Song To The Siren&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev1.jpg" /&gt;&lt;/a&gt;&lt;p&gt;Where The Wild Things Are&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="proj1.html"&gt;&lt;img src="img/prev2.jpg" /&gt;&lt;/a&gt;&lt;p&gt;At Night in Dreams&lt;/p&gt;&lt;/li&gt;
  &lt;/div&gt;
  
  
  .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; }
  </code></pre>
  
  <p><strong>I want to resize the images inside the li, which are yellow boxes. I want the images to be almost the size of the yellow box but stay centered and the text centered too, in one line only.</strong></p>
  
  <p>I thought that would be easy by simply changing the size of the images like this</p>
  
  <pre><code>.g img {
    width: 300px;
    height: 300px; 
  </code></pre>
  
  <p>}</p>
  
  <p>but the images get out of place, not centered and the text disappears in some of the boxes.</p>
  
  <p><strong>I have tried so many different things that I have no idea what else I can do.</strong> </p>
  
  <p>PS. This is also supposed to be responsive. But all I have managed to do is to make the yellow squares change position when the browser shrinks or enlarges (good enough!). But I would also like that the yellow squares (along with the images inside) would change their size just a little bit. But every code I tried made it look weird and the yellow boxes would jump spaces, creating gaps between each other were they weren't supposed to. (This is not a priority, just something I'd like to add if possible)</p>
  
  <p>I'm new to html and css so this is kinda hard for me! I'd really appreciate some help.</p>
  
  <p><strong>I tried to upload photos to show the problem but it appears I need "10 reputation" and so I couldn't :( If anyone is willing to help me and need to see pictures, I can send them or something. Thank you!</strong></p>