Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Trying to center images with css in a gallery

Posted on 2014-04-07
14
Medium Priority
?
220 Views
Last Modified: 2014-04-15
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
0
Comment
Question by:paulbsb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +2
14 Comments
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39984868
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39984892
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
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39985574
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Expert Comment

by:Kim Walker
ID: 39986305
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
 

Author Comment

by:paulbsb
ID: 39987470
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39987690
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
 

Author Comment

by:paulbsb
ID: 39996470
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
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39996677
Can you please clarify exactly what you mean by centred?
N
0
 

Author Comment

by:paulbsb
ID: 39996731
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39996917
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
 

Author Comment

by:paulbsb
ID: 39998086
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
 
LVL 5

Assisted Solution

by:Neil_Bradley
Neil_Bradley earned 600 total points
ID: 39998113
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
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 800 total points
ID: 39998128
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
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 600 total points
ID: 39998903
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question