Centering Image Block in Siriux Theme

thefluffyshrimp

Joined: 2007-02-25
Posts: 72
Posted: Thu, 2009-10-15 03:49

Hello,

I would like to center the image block displayed in my Siriux Theme.

As you can see, the image block appears aligned to the left:

Example Page 1 --> http://thefluffyshrimp.com/folio
Example Page 2 --> http://thefluffyshrimp.com/folio?g2_itemId=29

How can I get the image block to appear centered on the page?

(I like the text, i.e. comments, etc. to be still aligned to the left. I only want the image cluster to be aligned in the center.)

Thank you so much to anyone who can help me. :-)
 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Fri, 2009-10-16 23:59

If you inspect the page using Firebug, you'll see they sort of centered. There are 2 columns, each 46% wide with a padding on the right of 3%

.gallery-album {
display:block;
float:left;
overflow:hidden;
padding-right:3%;
width:46%;
}

You have text on the right of each thumbnail so it's always going to look like it's aligned left as there will always be more white space on the right.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
 
thefluffyshrimp

Joined: 2007-02-25
Posts: 72
Posted: Sat, 2009-10-17 01:03

I'm getting closer to centering it. The problem I'm having is with "float:left;" If I put "float:center;" it will immediately center everything, but will create only 1 thumbnail per row (the same thing happens if I delete "float:left;" all together). It will only let me chose between "float:left;" or "float:right;"

Example --> http://thefluffyshrimp.com/folio?g2_itemId=54

Quote:
.gallery-album {
width: 46%; /* Change to 96% if you want 1 Album per line */
display: block;
float: right;
padding-left:0%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}

Is there a way to center it using "float?"
 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Sat, 2009-10-17 02:07

You've got a crap-ton of CSS on the pages, but...

This seems to make it look pretty close to center:

.gallery-thumb {
height:180px;
width:21%;
float:left;
margin:2%;
}

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
 
thefluffyshrimp

Joined: 2007-02-25
Posts: 72
Posted: Sat, 2009-10-17 04:36

Alright! Everything is looking and working great now!

Thank you so much again for all your help, nivekiam! You're amazing.

I'm so happy with my website. :-D