Databases
StackOverflow2013
Postsdbo
POCenter inline block images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCenter inline block images
    text
    copied!<p>I need some help centering some images</p> <p>HTML:</p> <pre><code>&lt;div id="thumbs" class="navigation"&gt; &lt;ul class="thumbs noscript"&gt; &lt;li&gt; &lt;a class="thumb" href="#"&gt; &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="thumb" href="#"&gt; &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="thumb" href="#"&gt; &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;br&gt; &lt;li&gt; &lt;a class="thumb" href="#"&gt; &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="thumb" href="#"&gt; &lt;img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" /&gt; &lt;/a&gt; &lt;/li&gt; </code></pre> <p> </p> <p>CSS:</p> <pre><code>ul.thumbs { clear: both; padding-left: 0px; } ul.thumbs li { display: inline-block; /*float: left;*/ padding: 0; margin: 5px 10px 5px 0; list-style: none; } a.thumb { padding: 2px; display: block; border: 1px solid #ccc; } ul.thumbs li.selected a.thumb { background: #DAA12F; } a.thumb:focus { outline: none; } ul.thumbs img { border: none; display: block; height: 120px; width: 120px; margin: 0px auto; } </code></pre> <p>I need the images be centered together so that they remained lined up. Ive tried using: </p> <pre><code>ul.thumbs { text-align:center; } </code></pre> <p>but since there are a different number of images on each row, they move out of alignment</p> <p>Thanks for the help, this is driving me crazy</p> <p><strong>EDIT:</strong> I thought I found a solution using this as a guide: <a href="http://www.tightcss.com/centering/center_variable_width.htm" rel="nofollow">http://www.tightcss.com/centering/center_variable_width.htm</a> but if the images go over more than row, they no longer center. Originally I put a br tag to break up the rows and that fixes the problem, but a JS library Im using doesnt play nice with br tags between list items. Any suggestions (you can see the issue here <a href="http://jsfiddle.net/HvZva/26/" rel="nofollow">http://jsfiddle.net/HvZva/26/</a>)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload