Search code examples
htmlcsslistlayoutvertical-alignment

Unable to make icons align top with <li> containers

The live demo is at ashenglowgaming.com

In the following list, I cannot make my icons align with the top of the <li> containers. I have tried vertical-align: text-top and vertical-align: top to no avail.

Note that the icons are floated left, and will disappear if I remove this style.

Before you suggest - I am not allowed to make use of absolute positioning.

The icons also make use of transform: scale(0.75); - I don't know if this is relevant.

enter image description here

HTML:

<div class="right-widget">
<div class="execphpwidget">
<div class="narrowed games-list" style="text-align: left">
<p>Games I am writing/YouTubing about (more to come):</p>
<ul style="list-style-type: none;">
<li class="game-list-item age-of-empires-iii"><a href="https://www.ashenglowgaming.com/category/age-of-empires-iii/"><div style="display: block; overflow: hidden;">Age of Empires III</div></a></li>
<li class="game-list-item civilization-iii"><a href="https://www.ashenglowgaming.com/category/civilization-iii/"><div style="display: block; overflow: hidden;">Civilization III</div></a></li>
<li class="game-list-item factorio"><a href="https://www.ashenglowgaming.com/category/factorio/"><div style="display: block; overflow: hidden;">Factorio</div></a></li>
<li class="game-list-item heroes-of-the-storm"><a href="https://www.ashenglowgaming.com/category/heroes-of-the-storm/"><div style="display: block; overflow: hidden;">Heroes of the Storm</div></a></li>
<li class="game-list-item league-of-legends"><a href="https://www.ashenglowgaming.com/category/league-of-legends/"><div style="display: block; overflow: hidden;">League of Legends</div></a></li>
<li class="game-list-item pubg"><a href="https://www.ashenglowgaming.com/category/pubg/"><div style="display: block; overflow: hidden;">PUBG</div></a></li>
<li class="game-list-item stellaris"><a href="https://www.ashenglowgaming.com/category/stellaris/"><div style="display: block; overflow: hidden;">Stellaris</div></a></li>
</ul>
</div>
</div>

CSS:

.category-civilization-iii .entry-title:before, .civilization-iii a:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/category-game-icons.png"); 
background-position: -100px -95px;
background-repeat: no-repeat;
width: 90px;
height: 90px;
margin-bottom: 10px;
margin-right: 10px;
}

.civilization-iii :before{
transform: scale(0.75);
}

.category-age-of-empires-iii .entry-title:before, .age-of-empires-iii a:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/category-game-icons.png"); 
background-position: -5px -0px;
background-repeat: no-repeat;
width: 90px;
height: 90px;
margin-bottom: 10px;
margin-right: 10px;
}
.age-of-empires-iii :before {
transform: scale(0.75);
}

.category-heroes-of-the-storm .entry-title:before, .heroes-of-the-storm a:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/category-game-icons.png");
background-position: -100px -190px;
background-repeat: no-repeat;
width: 90px;
height: 90px;
margin-bottom: 10px;
margin-right: 10px;
}

.heroes-of-the-storm :before {
transform: scale(0.75);
}

.category-pubg .entry-title:before, .pubg a:before{
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/category-game-icons.png");
background-position: -5px -95px;
background-repeat: no-repeat;
width: 90px;
height: 90px;
margin-bottom: 10px;
margin-right: 10px;
}

.pubg :before{
transform: scale(0.75);
}

.category-stellaris .entry-title:before,
 .stellaris a:before{
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/category-game-icons.png"); 
background-position: -5px -285px;
background-repeat: no-repeat;
width: 90px;
height: 90px;
margin-bottom: 10px;
margin-right: 10px;
}

.stellaris :before{
transform: scale(0.75);
}


.category-factorio .entry-title:before, .factorio a:before {
float: left;
content: "";
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/category-game-icons.png"); 
background-position: -5px -190px;
background-repeat: no-repeat;
width: 90px;
height: 90px;
margin-bottom: 10px;
margin-right: 10px;
}

.factorio :before {
transform: scale(0.75);
}

.category-league-of-legends .entry-title:before, .league-of-legends a:before {
float: left;
content: "";
width: 90px;
height: 90px;
background: url("https://www.ashenglowgaming.com/wp-content/uploads/2017/12/category-game-icons.png");
background-position: -100px -0px;
width: 90px; 
height: 90px; 
background-repeat: no-repeat;
margin-bottom: 10px;
margin-right: 10px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

.league-of-legends :before {
transform: scale(0.75);
}

/* styling games list bullets */

.games-list ul {
margin-top: 10px;
margin-left: 0;
margin-bottom: 0;
}

.games-list li {
display: block;
overflow: hidden;
}
Solution

  • The simple solution is to add just one line of code to the before pseudoelement where you have scaled down. Since you're making use of background and transforming to scale down the image, that's why it isn't aligned to the top.

    You can make use of:

    transform-origin:top

    enter image description here