SCSS：文本对齐不起作用

Question

好吧，我尝试自己解决这个问题，但似乎很多人出于各种不同的原因遇到同样的问题，所以这是我的情况：

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

@专辑：

<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 位于左下角（顶部和底部相对于左侧 col 中图片的高度）但直到现在我只能用 padding-right: 15px 之类的东西来移动它；例如。我需要如何调整它，以使诸如 text-align: center; 之类的东西或浮动：底部；工作吗？

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

Answer 1

如果不能在 jsfiddle 或 codepen 上看到，很难说。你试过这个吗：

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

或者只是将#album_info 设为弹性框：

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