html - 无法使图标顶部与 容器对齐

Question

现场演示地址为 ashenglowgaming.com

在下面的列表中，我无法让我的图标与 <li> 的顶部对齐容器。我试过vertical-align: text-top和 vertical-align: top无济于事。

请注意，图标向左浮动，如果我删除此样式，图标将消失。

在你建议之前 - 我不允许使用绝对定位。

图标还使用了 transform: scale(0.75); - 我不知道这是否相关。

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;
}

Answer 1

简单的解决方案是在缩小后的伪元素前中添加一行代码。由于您正在利用背景和变换来缩小图像，这就是它没有与顶部对齐的原因。

您可以利用:

transform-origin:top