Solved

Trying to center images with css in a gallery

Posted on 2014-04-07
14
206 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 42

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 21

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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 21

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

758 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

21 Experts available now in Live!

Get 1:1 Help Now