Solved

Trying to center images with css in a gallery

Posted on 2014-04-07
14
207 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 52

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 43

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
 
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 52

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 52

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 150 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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 200 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 150 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Using custom html tags with differnt name but exact styling as existing ones 5 55
Element alignment and word wrapping 9 62
Phone Dialer 5 62
alert before form submission 6 32
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now