HTML & CSS Centering Images With Text

[hairdye]

Hello. I have been trying for the past 3 hours to center these 4 images with text underneath. After searching and searching and trying everything i have found, I can't figure it out. So if anybody knows what I'm doing wrong I would appreciate the help a lot. Thank you

<div class="icons">
          <ul>
            <li>
              <a href="Website/Tutorial/Tutorial.html">
                <img src="Tutorial.png" alt="Tutorial" height="50" width="50"><p>Tutorial</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="icons">
          <ul>
            <li>
              <a href="https://www.discord.gg/tCWnufzmwZ">
                <img src="Discord.png" alt="Discord" height="50" width="50"><p>Discord</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="icons">
          <ul>
            <li>
              <a href="https://www.store.valleymc.org">
                <img src="Store.png" alt="Store" height="50" width="50"><p>Store</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="icons">
          <ul>
            <li>
              <a href="https://www.google.com">
                <img src="Vote.png" alt="Vote" height="50" width="50"><p>Vote</p>
              </a>
            </li>
          </ul>
        </div>

.icons {
  float:left;
  margin-left: 100px;
}

.icons a:link {
  text-decoration: none;
}

.icons a:hover img {
  transform: scale(1.5);
  -webkit-transition: transform 0.2s ease-in-out;
}

.icons p {
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 600;
}

.icons li {
    list-style-type: none;
}

 

[Johna]

Hi @hairdye,

you'll have to add text-align: center; to the CSS of the icons so that the text and images align in the center.

.icons {
  float:left;
  margin-left: 100px;
  text-align: center;  /*add this*/
}

 

[hairdye]

Hi @hairdye,

you'll have to add text-align: center; to the CSS of the icons so that the text and images align in the center.

.icons {
  float:left;
  margin-left: 100px;
  text-align: center;  /*add this*/
}

I had tried this previously and it didn't work. I tried it again and still nothing. I was able to fix it just now by creating a new class for the icons and increasing margin-left: 100px; to margin-left: 150px; Here's what I added in the new class.

.center {
    margin: auto;
    margin-top: 50px;
    width: 60%;
}

 

[Johna]

It did work for me tho....

This is without text-align: center;


And this is with text-align: center;

 

[hairdye]

It did work for me tho....

This is without text-align: center;
View attachment 1327

And this is with text-align: center;
View attachment 1328

Hmm I'm not sure what could have been causing it than. Maybe something else in my code that I didn't include was messing it up. Thank you for your help, im glad it at least worked for you and if I run in to this issue again I will try your method again.