SCSS：テキスト揃え

Question

よく働いていない、私は自分自身でこれを解決しようとしたが、その多くの人々がさまざまな理由のすべてのソートに同じ問題を抱えているので、ここで私の状況であるように思える：

<div class="col-md-4"> 
 
    <ol class="albums"> 
 
    <%= render @albums %> 
 
    </ol> 
 
    <%= will_paginate @albums %> 
 
</div>

@album：

<li id="album-<%= album.id %>" class="listed_album"> 
 
    <div class=row> 
 
    <aside class="col-md-6" id="album_cover"> 
 
     <% if album.clips.any? %> 
 
     <%= link_to album do %> 
 
      <img src="http://img.youtube.com/vi/<%= album.clips.first.adress %>/mqdefault.jpg" height="110" width="178"> 
 
     <% end %> 
 
     <% else %> 
 
     <%= link_to album do %> 
 
      <img src="http://img.youtube.com/vi/ksjfhskd4/0.jpg" height="110" width="178"> 
 
     <% end %> 
 
    <% end %> 
 
    </aside> 
 
    <div class="col-md-6" id="album_info"> 
 
     <p><span class="title"><%= album.title %></span></p> 
 
     <span class="likes"> 
 
        <%= pluralize(Album.find(album_to_display).relationships.where(value: 1).count, "like") %> | 
 
        <%= pluralize(Album.find(album_to_display).relationships.where(value: -1).count, "dislike") %> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</li>

タイトルの左下にcolとspan.likesがありますが（左上の写真の高さに比例して上と下）、今まではパディングのようなもので動かすことしかできません - 右：15ピクセル。例えば。テキストの整列のようなものを作るためには、どのように調整する必要がありますか？center;またはフロート：ボトム。作業？

li.listed_album { 
    #album_info { 
    text-align: center; 
    } 
    span.likes { 
     float: bottom; 
    } 
} 

またはちょうどフレキシボックス#album_infoます：

Answer 1

jsfiddleまたはcodepen上でそれを見ることができずに伝えるのは難しい

li.listed_album { 
 
    #album_info { 
 
    span.title { 
 
     text-align: center; 
 
    } 
 
    span.likes { 
 
     float: bottom; 
 
    } 
 
    } 
 
}

は..あなたはこれを試してみました

#album_info { 
    display:flex; 
    justify-content: center; 
}