Having a problem centering gallery images in div. Using Skeleton framework

Hi,

I am having a huge problem centering my HTML gallery images in a div. All my images are pushed all the way to the left. I’m going crazy…please help. I am also using masonry.js with this, as well. Also, I am just starting to learn web design…so I am sure I messed up this code pretty bad.

<div class="container main">
  
<div class="row">
      
       <div class="three columns portfolio"><a href="images/alex_gallery_blk.jpg" data-keywords= "Hair and MakeUp"> <img src="images/alex_gallery_blk_thumb.jpg"/></a>
               </div>
           
          
        <div class="three columns portfolio"><a href="images/viva_gallery.jpg" data-keywords= "Hair and MakeUp"> <img  src="images/viva_gallery_thumb1.jpg"/></a>
               </div>
           
           
        <div class="three columns portfolio"><a href="images/alex_gallery.jpg" data-keywords= "Hair and MakeUp"> <img src="images/alex_gallery_thumb.jpg"/></a>
              </div>
        
         </div>
          
     
         <div class="row">
           <div class="three columns portfolio"><a href="images/bex_gallery.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bex_gallery_thumb.jpg"/></a>
       
            </div>
           <div class="three columns portfolio"><a href="images/gallery_huntress.jpg" data-keywords= "Hair and MakeUp"> <img src="images/gallery_huntress_thumb.jpg"/></a>
               </div>
         
           <div class="three columns portfolio"><a href="images/angelica_best.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_best_thumb.jpg"/></a>
               </div>
             </div>
           
           
           
       
           
         
           
           
         <div class="row">
           <div class="three columns portfolio"><a href="images/angelica_glitter.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_glitter_thumb.jpg"/></a>
               </div>
           
           <div class="three columns portfolio"><a href="images/viva_pan_updo.jpg" data-keywords= "Hair"> <img src="images/viva_pan_updo_thumb.jpg"/></a>
               </div>
           <div class="three columns portfolio"><a href="images/bella_flowers.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bella_flowers_thumb.jpg"/></a>
               </div>
            
          </div>
           
            
         
        
        
           
           
           
        
         <div class="row">
          <div class="three columns portfolio"><a href="images/bex_blue_dress.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bex_blue_dress_thumb.jpg"/></a>
               </div>
         <div class="three columns portfolio"><a href="images/angelica_garden.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_garden_thumb.jpg"/></a>
               </div>  
           
           <div class="three columns portfolio"><a href="images/bex_veil.jpg" data-keywords= "Hair and MakeUp"> <img src="images/bex_veil_thumb.jpg"/></a>
               </div> 
               
             </div>
              
            
             <div class="row">  
           <div class="three columns portfolio"><a href="images/viva_pan_closeup.jpg" data-keywords= "Hair"> <img src="images/viva_pan_closeup_thumb.jpg"/></a>
               </div>
              
           <div class="three columns portfolio"><a href="images/blonde_curls.jpg" data-keywords= "Hair and MakeUp"> <img src="images/blonde_curls_thumb.jpg"/></a>
               </div>   
          
           <div class="three columns portfolio"><a href="images/pandora_latex.jpg" data-keywords= "Hair and MakeUp"> <img src="images/pandora_latex_thumb.jpg"/></a>
               </div>  
               
              </div>
         
       
           
          
           
           
           <div class="row">
           <div class="three columns portfolio"><a href="images/victoria_light.jpg" data-keywords= "Hair and MakeUp"> <img src="images/victoria_light_thumb.jpg"/></a>
               </div>
           <div class="three columns portfolio"><a href="images/purple_pandora.jpg" data-keywords= "Hair and MakeUp"> <img src="images/purple_pandora_thumb.jpg"/></a>
               </div>   
          
           <div class="three columns portfolio"><a href="images/angelica_blue.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_blue_thumb.jpg"/></a>
               </div>    
           </div>
        
          
         <div class="row">
           <div class="three columns portfolio"><a href="images/blue_lookbook.jpg" data-keywords= "Hair and MakeUp"> <img src="images/blue_lookbook_thumb.jpg"/></a>
               </div>
          
           <div class="three columns portfolio"><a href="images/fashion_show.jpg" data-keywords= "Hair and MakeUp"> <img src="images/fashion_show_thumb.jpg"/></a>
               </div> 
          
           
             
           <div class="three columns portfolio"><a href="images/angelica_beauty.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_beauty_thumb.jpg"/></a>
             </div> 
        
        </div>
        
        <div class="row">
   
           <div class="three columns portfolio"><a href="images/girl_about_town.JPG" data-keywords= "Hair and MakeUp"> <img src="images/girl_about_town_thumb.JPG"/></a>
               </div>
           
           <div class="three columns portfolio"><a href="images/sasha_harry_shoot.jpg" data-keywords= "Hair and MakeUp"> <img src="images/sasha_harry_shoot_thumb.jpg"/></a>
               </div> 
           
           <div class="three columns portfolio"><a href="images/jake_saunders.jpg" data-keywords= "Hair and MakeUp"> <img src="images/jake_saunders_thumb.jpg"/></a>
               </div> 
           
          </div>
      
        
        
        
       <div class="row">
           <div class="three columns portfolio"><a href="images/victoria_soft.jpg" data-keywords= "Hair and MakeUp"> <img src="images/victoria_soft_thumb.jpg"/></a>
               </div>
              
           
           <div class="three columns portfolio"><a href="images/angelica_natural.jpg" data-keywords= "Hair and MakeUp"> <img src="images/angelica_natural_thumb.jpg"/></a>
               </div>  
           
           <div class="three columns portfolio"><a href ="images/linkedin_staff.jpg" data-keywords= "MakeUp"> <img src="images/linkedin_staff_thumb.jpg"/></a>
             </div>
             
           </div>
             
             
          <div class="row">
           <div class="three columns portfolio"><a href="images/linkedin_jumping.jpg" data-keywords= "MakeUp"> <img src="images/linkedin_jumping_thumb.jpg"/></a>
               </div>
           
            <div class="three columns portfolio"><a href="images/Jess_wordville.jpg" data-keywords= "Hair and MakeUp"> <img src="images/Jess_wordville_thumb.jpg"/></a>
               </div>
           
             <div class="three columns portfolio"><a href="images/linkedin_girls.jpg" data-keywords= " MakeUp"> <img src="images/linkedin_girls_thumb.jpg"/></a>
                 </div>  
                 </div> 
                 
                 
                 
                 
                 
           <div class="row">
           <div class="three columns portfolio"><a href="images/linkedin_young_red.jpg" data-keywords= " MakeUp"> <img src="images/linkedin_young_red_thumb.jpg"/></a>
               </div>
           
           <div class="three columns portfolio"><a href="images/lookbook.jpg" data-keywords= "Hair and MakeUp"> <img src="images/lookbook_thumb.jpg"/></a>
               </div>
          
          
           <div class="three columns portfolio"><a href="images/salina_red_room.jpg" data-keywords= "Hair and MakeUp"> <img src="images/salina_red_room_thumb.jpg"/></a>
               </div>
                <div class="three columns portfolio"><a href="images/polly_wordville.jpg" data-keywords= "Hair and MakeUp"> <img src="images/polly_wordville_thumb.jpg"/></a>
               </div> 
          </div>
           
           
    <div class="row">
           <div class="three columns portfolio"><a href="images/salina_steps.jpg" data-keywords= "Hair and MakeUp"> <img src="images/salina_steps_thumb.jpg"/></a>
               </div>
               
           <div class="three columns portfolio"><a href="images/zeetv.jpg" data-keywords= "Hair and MakeUp"> <img src="images/zeetv_thumb.jpg"/></a>
               </div>  
           
           <div class="three columns portfolio">
               <a href="images/pema_wordville.jpg" data-keywords= "Hair and MakeUp"> <img src="images/pema_wordville_thumb.jpg"/></a>
               </div>
          
       </div>
         
            
            
          <div class="row">
          
           
           <div class="three columns portfolio"><a href="images/wordville_staff.jpg" data-keywords= "Hair and MakeUp"> <img src="images/wordville_staff_thumb.jpg"/></a>
               </div> 
          
           <div class="three columns portfolio"><a href="images/salina_flowers.jpg" data-keywords= "Hair and MakeUp"> <img src="images/salina_flowers_thumb.jpg"/></a>
             </div>    
           
           </div>
        
          
           
           
           
           
           <div class="row">
           <div class="three columns portfolio"><a href="images/saph_shoot.jpg" data-keywords= "Hair and MakeUp"> <img src="images/saph_shoot_thumb.jpg"/></a>
               </div> 
           <div class="three columns portfolio"><a href="images/sasha_fashion_show.jpg" data-keywords= "Hair and MakeUp"> <img src="images/sasha_fashion_show_thumb.jpg"/></a>
               </div>   
          
           <div class="three columns portfolio"><a href="images/viva_pan_standing.jpg" data-keywords= "Hair"> <img src="images/viva_pan_standing_thumb.jpg"/></a>
               </div>
               </div>
                
                
          <div class="row">
           <div class="three columns portfolio"><a href="images/moody.jpg" data-keywords= "Hair and MakeUp"> <img src="images/moody_thumb.jpg"/></a>
               </div>
           
           <div class="three columns portfolio"><a href="images/blue_pandora.jpg" data-keywords= "Hair and MakeUp"> <img src="images/blue_pandora_thumb.jpg"/></a>
               </div>
           
           <div class="three columns portfolio"><a href="images/s_remastered.jpg" data-keywords= " MakeUp"> <img src="images/s_remastered_thumb.jpg"/></a>
               </div>
      </div>
    
     
      
       
        </div><!--container-->

             <footer>
                <div class="twelve columns">
		<div class="row social">
			<ul class="social">
			<li class="facebook"><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li>
			<li class="twitter"><a href="#"><i class="fa fa-twitter-square fa-lg"></i></a></li>
			<li class="instagram"><a href="#"><i class="fa fa-instagram fa-lg"></i></a></li>
			<li class="linkedin"><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
			</ul>
		</div>
                    
                     <div class="row twelve columns"></div>
                     <p>&copy;2015 . All Rights Reserved.</p>
                 </div>
                 
             </footer>
       
         
   


</body>
</html>

CSS

/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header & Navigation
- Images & Media
- Footer
- Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */

/* General Content
–––––––––––––––––––––––––––––––––––––––––––––– */

.main.portfolio{
	margin:0;
	
	
	
	
}




 


/* Typography
---------------------------------------------- */

/* Header & Navigation
---------------------------------------------- */
header.main_nav{
  padding: 1% 0;
  display:block;    
}

/* Images & Media
---------------------------------------------- */



img{
	max-width: 100%;
 
    
}


.portfolio {
	
	
	margin: auto ;
	padding:.2em .2em;
	
	}


img:hover{
   opacity:0.8;   
}



/* Footer
----------------------------------------------- */
ul.social{
	display: block;
	margin: 5% 0;
	list-style-type: none;
	text-align: center;
}

ul.social li{
	font-size: 2em;
	display: inline;
	padding: 0 2%;
}

ul.social li a{
	color: #666;
}
ul.social li.facebook a:hover{color: rgb(59,89,152);}
ul.social li.twitter a:hover{color: rgb(0,172,237);}
ul.social li.instagram a:hover{color: rgb(81,127,237);}
ul.social li.linkedin a:hover{color: rgb(0, 123,182);}
p.copyright{
    text-align: center;
    color: #666;
    font-size: 1em;
}
/* Media Queries
------------------------------------------------ */

Hi,

We would really need a link to the page to debug properly as your scripts may be changing things also.

If you want to center your thumbnail images in the div in which they reside then you can set them to display:block and use margin:auto.

e.g.

.portfolio img{display:block;margin:auto}

There are other ways to center them such as tex-align:center on the parent div and make sure the image is display:inline.

Hi,

Thanks, I did try those options initially, but it didn’t work too well. Still had margin issues. You’re right though it would be best if I upload a link to my site. I’m just going to try a few more things and then upload my files to the server and I’ll post the link. Thanks for your suggestions.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.