Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Trying to center images with css in a gallery

Posted on 2014-04-07
14
Medium Priority
?
225 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
  • 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 54

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 54

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 54

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 54

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…
Suggested Courses

971 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