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的顶部中心左下角（相对于左边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设为flexbox：

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

Scss：text-align不起作用

1 个答案: