Trying to center images with css in a gallery

Hi,
I'm trying to center the images in this gallery. http://www.paulb.com/1-gallery.htm

I've tried setting margins to auto and a number of other things, Can anyone help?

The css file is attached
gallery.css
paulbsbAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
See this new sample.  Obviously I am just using the minimum for the sample and you can add more styles as needed  http://jsbin.com/jesez/2/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>padas Q_28407171</title>
  <style>
    ul.image_container{
      margin: 0;
      padding: 0;
      list-style-type: none;
      text-align: center;
    }
     ul.image_container li h3{
      font-size:14px;
       margin-top:0px;
    }
    
    ul.image_container li { 
      display: inline-block;
      width:200px;
    }
  

    </style>
</head>
<body>
<div class="container">
  
  <ul class="image_container">
    <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li>
     <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li> <li><img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg"><h3>Lenticular Sunset (2014)</3></li>
      
  </ul>
  </div>  
</body>
</html>

Open in new window

0
 
Neil_BradleyWeb UX/UI DeveloperCommented:
I would wrap the table containing the gallery thumbs in a div. Give the div a width as well as a left and right margin of auto. It will then centre itself in the browser.

Generally tables (for this kind of application) is a very old ancient way of working. A cleaner solution could have been made using div, ul and li tags..
Good luck!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You just need to give the outer div a width and make the margin auto for the table.  See below code and the working sample http://jsbin.com/xitimuci/1/  (I added borders here)


    
div#gallery{width:100%;}
div#gallery table{ margin: 0 auto;}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Chris StanyonCommented:
If you don't want to set a width on the table, style the #gallery div to text-align:center and the #thumbs table to display: inline-block
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Please clarify. Do you want the group of images to center in the page? Do you want the images to center within the table cells? Do you want the image to be centered over the title? As they are, the images are not center aligned to anything.
0
 
paulbsbAuthor Commented:
All three without the table with div, ul, and li tags?

Please clarify. Do you want the group of images to center in the page? Do you want the images to center within the table cells? Do you want the image to be centered over the title? As they are, the images are not center aligned to anything.

Generally tables (for this kind of application) is a very old ancient way of working. A cleaner solution could have been made using div, ul and li tags..
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
paulbsb, what you said here http:#a39987470 would be nice to have been stated in your original question.  

>Generally tables (for this kind of application) is a very old ancient way of working. A cleaner solution could have been made using div, ul and li tags..

Yes, that is what we are all thinking.

In any case, if you use a div, text-aign:center will center the child elements below.  
http://jsbin.com/fewuqema/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    #ul_container{text-align:center;}
    #ul_container li{list-style-type: none;}
    </style>
  <meta charset="utf-8">
  <title>padas Q_28407171</title>
</head>
<body>
  <div id="main">
<div id="ul_container">
  <ul>
    <li>stuff</li>
    <li>stuff</li>
    <li>stuff</li>
  </ul>
  </div>
</div>
</body>
</html>

Open in new window

0
 
paulbsbAuthor Commented:
I had to do something else for two days and didn't get to this until yesterday. I haven't gotten it yet. I have the ul and li layout without the tables but it still isn't centered.
http://www.paulb.com/1-gallery.htm

I'm putting the css changes on this page only. I'm going to work on it for a few hours this afternoon. Any suggestions are welcome, and if I don't have it by the end of the day I will post again.
0
 
Neil_BradleyWeb UX/UI DeveloperCommented:
Can you please clarify exactly what you mean by centred?
N
0
 
paulbsbAuthor Commented:
I'm trying to get these pictures centered from left to right and centered under each other. The second row aligns roughly 20px to the left of the top row and the vertical image on the right is way off. In a table it's easy to align all these in the center of each cell, but I can't seem to figure out how to do that with ul li in css.

Like this:
>>> Do you want the group of images to center in the page? Do you want the images to center within the table cells? Do you want the image to be centered over the title? As they are, the images are not center aligned to anything<<<<

http://www.paulb.com/1-gallery.htm

This is what I've got for css:
<style>
    #ul_container{
      text-align:center;
}
    #ul_container li{
      list-style-type: none;
      display: inline;
      text-align: center;
      float: left;
      font-size: 12px;
      color: #33cc00;
      padding-left: 20px;
      margin-left: 20px;
      text-decoration: none;
      }
    #gallery #ul_container ul li h3 a {
      color: #33cc00;
      font-family: AndikaBasicRegular;
      text-decoration: none;
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      border-left-width: 0px;
      font-size: 8px;
}
</style>
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
In css you will use text-align:center

http://jsbin.com/jesez/1/
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>padas Q_28407171</title>
  <style>
    .image_container{text-align:center;}
    /* for demo of image */
    .image_container{border:solid;}
    </style>
</head>
<body>
<div class="container">
  
  <div class="image_container">
    <img src="http://www.paulb.com/paintings/lenticular-sunset-t.jpg">
  </div>
  </div>  
</body>
</html>

Open in new window

0
 
paulbsbAuthor Commented:
Scott,
I've got that as far as centering an item within the cell and I will accept that as it was my original question when I had the table. I'm trying to center the ul li tags without the table now.

I'm trying to get these pictures centered from left to right and aligned under each other. The second row aligns roughly 20px to the left of the top row and the vertical image on the right is way off. In a table it's easy to align all these in the center of each cell, but I can't seem to figure out how to do that with ul li in css.
http://www.paulb.com/1-gallery-img.htm

I wonder if setting a 900px width and l & r margins to auto would fix that? If you think that wold solve this, I will accept this and work on that. I will need to redo the menu to 900px and that will take me a couple days, then if I have a problem I will post a new question. Please let me know if you think if this will work. Otherwise I will use the table. You are the only one who has actually responded with code so I will accept your solution.

Thanks,
Paul
0
 
Neil_BradleyWeb UX/UI DeveloperCommented:
Try adding this css
ul li h3 a img {
max-height: 128px;
min-height: 129px;
}
div#gallery {
width: 900px;
margin-left: auto;
margin-right: auto;
}

Open in new window


The first style helps to sort out the uneven images sizes and allows them to flow more evenly in a list (you may need to tweak this). The second style will centre your containing div on your page (this also can be adjusted to fit your design theme).
N
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
There are at least three things that are causing issues here.

1. Margin and Padding

In order for the contents to be centered horizontally, the margin and padding must be equal on both sides. Your <li> tags currently have 20px left margin AND 20px left padding. Try changing those to 10px left and right

2. Floated elements do not generate height

Floated elements do not generate height for their parent elements. So a <ul> that contains only floated <li> tags will have no height. In this case it appears to be inheriting margins from the user agent but otherwise the height is zero. The parent div that contains the <ul> tags also has no height. Try adding this to the CSS for all the <ul> tags which will cause these elements to take on the height of the floated child elements.
overflow: hidden;

Open in new window

3. Set the width

As with many block level elements, <div> and <ul> tags naturally inherit the width of their parent elements. Therefore, in order for these element be be centered, a width must be specified for these elements which is less than their parent element. This can be an absolute (i.e. 600px) or relative (i.e. 75%) width. In order to center the element, then, the parent element must be set to text-align: center (older IE versions) and the left and right margins must be set to auto.After these changes have been made, we can begin to tweak the remaining styles.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.