Question

I’ve been working on a site, and come into a snag.
I’ve got various li’s inside a single ul.
I’d like for each li to be centred, and not overlap how they are now. Hopefully chaning the li’s width will allow me to have a choice of how many I have per row. Currently 4 should fit.
I’m using the cycle plugin, but I’ve looked through the FAQ and can’t find anything that describes my issue (I think).
Here is some of the code:

<ul>
<li>
<a href="./portrait.php">
<h2>Portrait</h2><br />
<div class="slideshow">
<img src="./photos/Abstracted Portrait Study One_Thmb.png">
<img src="./photos/Angelic_Thmb.png">
</div>
</a>
</li>

<li>
<a href="./stilllife.php">
<h2>Still Life</h2><br />
<div class="slideshow">
<img src="./photos/Composition Study One_Thmb.png">
<img src="./photos/Composition Study Two_Thmb.png">
<img src="./photos/Composition Study Three_Thmb.png">
<img src="./photos/Light Bulb Study One_Thmb.png">
</div>
</a>
</li>

[...]

</ul>

CSS:

#portfoliotextarea li{
width: 200px;
text-align: center;
display: inline-block;
margin-left: auto;
margin-right: auto;
}

And the URL: http://www.duffydesigns.co.uk/portfolio/gallery/
Thank you for your time, I hope I’m not just being silly and not seeing straight >.<

Answer 1

do float:left in your li and make a width for the li, also have overflow:hidden for ul