1

Hope someone can help me, I am trying to center my gallery (list items) and I feel I have tried everything and nothing is working, if someone could point me in the right direction it would much appreciated. http://www.jamessuske.com/thornwood/gallery.php

HTML CODE

<div class="gallery">
<ul>
<li><a href="pics/1.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon1.jpg" border="0" /></a></li>
<li><a href="pics/2.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon2.jpg" border="0" /></a></li>
<li><a href="pics/3.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon3.jpg" border="0" /></a></li>
<li><a href="pics/4.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon4.jpg" border="0" /></a></li>
<li><a href="pics/5.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon5.jpg" border="0" /></a></li>
<li><a href="pics/6.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon6.jpg" border="0" /></a></li>
<li><a href="pics/7.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon7.jpg" border="0" /></a></li>
<li><a href="pics/8.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon8.jpg" border="0" /></a></li>

CSS CODE

.gallery{
width:965px;
float:right;
}
.gallery ul{
list-style-type:none;.gallery li{
float:left;
text-align:center;
}

.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
 }
2
  • What's this?: list-style-type:none;.gallery li{
    – Mog
    Oct 26, 2011 at 21:53
  • Are you trying to centre your list within the gallery div? Or centre the gallery div within it's parent container? Or centre the list items within the list? It's unclear what you're trying to achieve.
    – mal-wan
    Oct 26, 2011 at 21:59

3 Answers 3

1

Centering child elements can be done like this:

  • Apply text-align:center to the parent element
  • Remove any floats from children and apply or ensure that the display is inline or inline-block

So something like this:

.gallery ul {
    text-align:center;
}
.gallery li {
    float:none; /* or just make sure you don't float them */
    display:inline-block;
}

Should work for you, if your goal is to center the images but have them in rows.

1
  • Note that your layout has some other issues, the main content area seems to be cut off on the right...
    – Mog
    Oct 26, 2011 at 22:04
0

Can't do it with float left: Example http://jsfiddle.net/HerrSerker/KvPPe/

.gallery{
  width:965px;
}

.gallery ul{
  list-style-type:none;
  text-align:center
}

.gallery li{
  display: inline-block;
}
* html .gallery li { /* IE6 */
  display: inline;
}
*:first-child + html .gallery li { /* IE7 */
  display: inline;
}

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 0 0 5px;
}
1
  • If you think the gaps between the images are to big, try removing the spaces (including line breaks and tabs) between </li> and <li> and between <img /> and <a> and <li>. So make <li> <a> <img /> </a> </li> <li> .. </li> into this <li><a></img></a></li><li>..</li>
    – yunzen
    Oct 26, 2011 at 22:04
0

You are going to continue to have significant problems with all this because you don't have a doctype and you are in 'quirks mode'. Add this to your very first line: <!DOCTYPE html>.

However, by adding the doctype, this may change the whole layout. But that's the cost of not starting off properly.

1
  • You even don't have a html skeleton. Add <html>, <head>, and <body> in a proper way
    – yunzen
    Oct 27, 2011 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.