title: Scss: text-align not working
body: <p>Well, I tried solving this on my own but it seems like that many people have the same problem for all sort of different reasons, so here is my situation:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-4"&gt;
    &lt;ol class="albums"&gt;
      &lt;%= render @albums %&gt;
    &lt;/ol&gt;
      &lt;%= will_paginate @albums %&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>@album:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li id="album-&lt;%= album.id %&gt;" class="listed_album"&gt;
    &lt;div class=row&gt;
      &lt;aside class="col-md-6" id="album_cover"&gt;
        &lt;% if album.clips.any? %&gt;
          &lt;%= link_to album do %&gt;
            &lt;img src="http://img.youtube.com/vi/&lt;%= album.clips.first.adress %&gt;/mqdefault.jpg" height="110" width="178"&gt; 
          &lt;% end %&gt;
          &lt;% else %&gt;
          &lt;%= link_to album do %&gt;
            &lt;img src="http://img.youtube.com/vi/ksjfhskd4/0.jpg" height="110" width="178"&gt; 
          &lt;% end %&gt;
      &lt;% end %&gt;
      &lt;/aside&gt;
      &lt;div class="col-md-6" id="album_info"&gt;
        &lt;p&gt;&lt;span class="title"&gt;&lt;%= album.title %&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;span class="likes"&gt;
                    &lt;%= pluralize(Album.find(album_to_display).relationships.where(value: 1).count, "like") %&gt; | 
                    &lt;%= pluralize(Album.find(album_to_display).relationships.where(value: -1).count, "dislike") %&gt;
          &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to have the title in the top-center of its col and span.likes in the bottom-left (top and bottom relative to the height of the picture in the col to the left) but until now I was only able to move it with something like padding-right: 15px; for example. How do I need to adjust it, in order to make things like text-align: center; or float: bottom; work?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li.listed_album {
    #album_info {
      span.title {
        text-align: center;
      }
    span.likes {
        float: bottom;
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>