将图像放在同一行 [Ruby on Rails]

Question

我有徽章显示在个人资料页面上但是有这个白色块 space 填充。我不确定如何适当地放置徽章。我试着在不使用 div 的情况下玩耍，但它看起来一团糟。我不是CSS方面的专家，所以我想知道如何修复页面上的定位。

截图如下： View Page

我的代码：

<style>
    .badgecss1 {
        float: left;
        position: absolute;
        top:140px;
        left:100px;
    }
    .badgecss2 {
        float: left;
        position: absolute;
        top:140px;
        left:150px;
    }
    .badgecss3 {
        float: left;
        position: absolute;
        top:140px;
        left:200px;
    }

    .in-para {
        right: 520px;
        top: 70px;
        position: relative;
        display: inline;
    }
</style>

<div style="text-align: center">
    <h4 style="position:absolute; top:100px;" class="badgecss">Badges:</h4>

    <% @user.badges.each_with_index do |b,i| %>
        <div id="badgecss<%=i+1%>" class="in-para">
            <%= image_tag(b.custom_fields[:image], width: "7.1%", title:b.description, ) %>
        </div>
    <% end %>

    <div style="position:sticky;">
        Followers: <%= link_to @user.followers.count, user_followers_path(@user.username) %> 

        <% if @user.avatar.present? %>
            <%= image_tag(@user.avatar.variant(resize_to_fill: [130,130]), 
            class: "rounded-circle", style: 'border:2px solid black;') %>
        <% else %>
            <%= image_tag 'default-pfp.png', style:'max-width:10rem;'%>
        <% end %> 
        
        Following: <%= link_to @user.followings.count, user_followings_path(@user.username) %> </p>
    </div>
    <h3> @Serena99 </h3>
    <p> Motto: "<%= @user.motto %>" </p>
</div>

Answer 1

首先将 h4 和徽章包装在 <div class="row"> 中。

Answer 2

将 <h4> 和图像包装器 <div> 包装在一个 <div class="badge-wrapper"></div> 元素中并在下面添加 css:

.badge-wrapper{
   display: flex;
   align-items: center;
}

将图像放在同一行 [Ruby on Rails]

Place images on same line [Ruby on Rails]

css

ruby-on-rails