title: CSS - positioning a scroll div
body: <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="scrolls"&gt;
  &lt;img src="http://avatar.hivemc.com/avatar/aruturek/100" /&gt;aruturek
  &lt;img src="http://avatar.hivemc.com/avatar/aruturek/100" /&gt;aruturek
  &lt;img src="http://avatar.hivemc.com/avatar/aruturek/100" /&gt;aruturek
  &lt;img src="http://avatar.hivemc.com/avatar/aruturek/100" /&gt;aruturek
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper { 
      background:#EFEFEF; 
      margin: auto; 
      ;
      text-align: center; 
      position: relative;
      margin-bottom: 20px !important;
      width: 540px;
      padding-top: 5px;
  }
  .scrolls { 
      overflow-x: scroll;
      overflow-y: hidden;
      height: 150px;
  white-space:nowrap
  } 
  .imageDiv img { 
      margin: 2px;
      max-height: 100px;
      cursor: pointer;
      display: inline;
      *display:inline;
      *zoom:1;
      vertical-align:top;
  }
  </code></pre>
  
  <p>This is the result:
  <a href="http://jsfiddle.net/masgp4fg/" rel="nofollow noreferrer">qshg7muq9vam.png http://jsfiddle.net/masgp4fg/</a>
  But I want to text "aruturek" was under the image, and is centered.</p>
  
  <pre><code>______________
  |             |
  |             |
  |     HEAD    |    and more...
  |             |
  |             |
  ______________
       NICK
  </code></pre>
  
  <p>How I can position this?</p>
  
  <p>Sorry for my english, I am from Poland! D:</p>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/masgp4fg/" rel="nofollow noreferrer">http://jsfiddle.net/masgp4fg/</a></p>