CODEWITHSUNDEEP
htmlcss
Tom Hanson
Tom Hanson

Reputation: 945

Centering images in a div

I am trying to the images in this gallery to auto center themselves and no matter what I do they refuse to go to the center. Yes I understand should not be used anymore but it still should work. Please help HTML

<div id='gallery_gallery'>
            <center>
                    <div id='imageList'>
                    <center>
                    <?php
                        $directory = 'images/gallery';
                        $files = scandir($directory);
                        $file_length = sizeof($files);
                        $to = 16;
                        $start = 2;
                        if($to > $file_length) $to = $file_length;
                        for($i=$start; $i <= $start-1+$to; $i++)
                        {
                            echo "<div class='galleryImage'><img src='images/gallery/".$files[$i]."' width='100%' onclick='showImage(\"".$files[$i]."\")'></div>";
                        }
                    ?>
                    </center>
                    </div>
                </center>
            </div>

CSS

#gallery_gallery
{
position: absolute;
top: 75px;
left: 80px;
width: 825px;
height: 960px;
}
#imageList
{
background-color: yellow;
width: 825px;
text-align: center;
}
.galleryImage
{
width: 180px;
height: 180px;
float: left;
overflow: hidden;
}
.galleryImage img
{
min-width: 100%;
min-height: 100%;
padding: 10px;
}
.galleryImage img:hover
{
cursor: pointer;
}

RESULT http://sonny.hostingsiteforfree.com/gallery.html

Upvotes: 0

Views: 97

Answers (8)

MarmiK
MarmiK

Reputation: 5785

I see the CSS is not following standards.

The ImageWrapper galleryImage has overflow:hidden with the image galleryImage img has padding:10px which cause everything to go unstable here.

I have created a fiddle here you may check the changes...

CSS:

#gallery_gallery {
    position: absolute;
    top: 75px;
    left: 80px;
    width: 825px;
    height: 960px;
    text-align:center;
    background:#777;
}
#imageList {
    background-color: yellow;
    width: 825px;
    text-align: center;
    margin-left:10px;
}
.galleryImage {
    width: 180px;
    height: 180px;
    float: left;
    overflow: hidden;
    margin:10px 10px;
}

.galleryImage img {
    min-width: 100%;
    min-height: 100%;

}
.galleryImage img:hover {
    cursor: pointer;
}

Also, we need to close the img tag in PHP code. using this self closing of tag />

This causes your image style not work properly.

 echo "<div class='galleryImage'><img src='images/gallery/".$files[$i]."' width='100%' onclick='showImage(\"".$files[$i]."\")' /></div>";

Check the fiddle its working fine.. :)

Upvotes: 1

Cristi Marian
Cristi Marian

Reputation: 453

Just rewrite this style 

 .galleryImage {
width: 180px;
height: 180px;
display: inline-block;
overflow: hidden;
}

Upvotes: 0

proteuscanvas
proteuscanvas

Reputation: 1

Try use the margin 

margin:0 auto;

Upvotes: 0

Mrunal Pittalia
Mrunal Pittalia

Reputation: 165

  1. Remove your css
  2. Remove "center" tag from #gallery_gallery that you have written.

  3. Apply Below CSS.

     .pageWrap { margin: auto; width: 1000px;}

 #main_content_gallery {background: url("../images/gallery_bg.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);height: 1722px;padding: 72px;}

 .main_content {clear: both;width: 100%;}

 #gallery_gallery {clear: both;margin: 0 61px;padding: 0;width: 100%;}

 #imageList {background-color: yellow;clear: both;float: none;text-align: center;width: 80%;}

 .galleryImage {float: left;height: 180px;overflow: hidden;width: 180px;}

 .galleryImage img {min-height: 100%;min-width: 100%;padding: 10px;}

 #imageList {text-align: center;}

 #mainmenu {left: 1px;position: relative;width: 800px;}

 #mainmenu, #mainmenu ul {list-style: none outside none;margin: 0;padding: 0;}

 .pageWrap {margin: auto; width: 1000px;}

 #mainmenu a {color: black;float: left;font-family: 'Coda',cursive;font-size: 20px;padding: 0 30px 12px;text-decoration: none;text-shadow: 0 1px 0 #000;}

 #floatBox {background-color: rgba(0, 0, 0, 0.5);display: none;height: 100%;left: 0;position: fixed;top: 0;width: 100%;}

 #float_image { height: 600px;}

 #float_tools {margin: auto;opacity: 0.3;transition: opacity 0.5s ease-out 0s;width: 50px;}

 #floatimg {border: 10px solid white;border-radius: 5px;float: none;height: 550px;}

Let me know if it doesn't works.

Upvotes: 0

AmanVirdi
AmanVirdi

Reputation: 1685

You should changes height and width of ".galleryImage" css class, like this:

.galleryImage {
    float: left;
    height: 243px;   /* changed from 180*/
    overflow: hidden;
    width: 205px;   /* changed from 180*/
}

I have tested this on your link, It works well.

Upvotes: 0

Manwal
Manwal

Reputation: 23846

Just add:

width: 731px;/* change from 825px */
display: inline-block;//new added

to #imageList

Note: I have tested this.

Upvotes: 0

Senthilkumar Manoharan
Senthilkumar Manoharan

Reputation: 148

Its all because of the float style you are using, if you remove the div with class 'galleryImg', it will work properly.

echo "<img src='images/gallery/".$files[$i]."' width='180' onclick='showImage(\"".$files[$i]."\")'>";

try this one.

Upvotes: 0

user3857868
user3857868

Reputation:

Just add text-align: center; to #imageList. Here's a demo: http://jsfiddle.net/VLJYq/

Upvotes: 0

Related Questions