html - 使图像内联并在其下方设置用户名

Question

<div class="players">
    {{#each users}}
        {{#each usersInLobby}}
        <img src="/img/chars/{{skin}}.png" style="height: 85px">
            <p>{{username}}{{level}}</p>
        {{/each}}
    {{/each}}
</div>

这是我目前的代码。但它是这样显示的:

我想让用户名位于图像下方，并且图像内联显示。

Answer 1

有几种方法可以实现您想要的。这里有两个例子:

使用display: inline-block;

.player {
  margin: 10px;
  border: 1px solid red;
  padding: 10px;
  text-align: center;
  display: inline-block;
}

<div class="players">
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
    
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
</div>

使用display: flex;

.players {
  display: flex;
}

.player {
  margin: 10px;
  border: 1px solid red;
  padding: 10px;
  text-align: center;
}

<div class="players">
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
    
    <div class="player">
        <img src="https://picsum.photos/100">
        <p>Username - Level</p>
    </div>
</div>

这两种解决方案都需要您将元素包装在包装 div 中。