PDA

View Full Version : Div centering problem



sixrfan
Sep 28th, 2009, 10:29 PM
any idea why i cant get the div class="center" to actually center on the page? thanks!

html:


<div class="center">
<div class="thumb"><img src="/old_thumb.JPG" /></div>
<div class="thumb"><img src="/new_thumb.JPG" /></div>
</div>


css:


.center {
text-align: center;
}
.thumb {
text-align: center;
padding: 7px;
float: left;
height: auto;
min-width: 120px;
font-size: 12px;
}
.thumb a:link {
text-align: center;
}
.thumb a:visited {
text-align: center;
}
.thumb a:hover {
text-align: center;
}
a.thumb img {
border: 1px solid #FFFFFF;
}
a.thumb img:visited {
border: 1px solid #FFFFFF;
}
a.thumb img:hover {
border: 2px solid #FF0000;
}

Scriptet
Sep 28th, 2009, 10:45 PM
The center DIV needs to have a width and then you use margin:0 auto to center it.

djm0219
Sep 28th, 2009, 10:46 PM
.center {
text-align: center;
margin: 0 auto;
}

sixrfan
Sep 29th, 2009, 03:30 AM
thanks but that didnt seem to work.

and to be clear, the end result i'm looking for is to have these thumbnail divs horizontally lined up. but have the group of them centered on the page.

please advise. thanks!

djm0219
Sep 29th, 2009, 12:13 PM
As Scriptet said, add a width to that div also.



.center {
width: 100%;
text-align: center;
margin: 0 auto;
}

Scriptet
Sep 29th, 2009, 04:47 PM
Yeah having a DIV around each of the images seems like it is redudant anyways.

If you didn't have this DIV around each of the images then the images would center automatically anyhow because text-align:center; centers it's inline children (the images). So it's possible even if you didn't know the width.

BTW DJM there's no point centering a 100% width DIV because well it's 100% width, so how can that be centered :)

sixrfan
Sep 29th, 2009, 08:24 PM
that doesnt seem to have worked. but maybe i can better portray what i have and what i'm looking for with the attached picture.

and to be more clear, i have both a text hyperlink and a thumbnail image hyperlink that should be centered inside of each .thumb div. but then i want all four divs to be centered in the page.

so here's a little revision to my original html which might help.



<div class="center">
<div class="thumb"><a href="http://www.x.com" target="_blank">X.com</a><br>
<a href="http://www.x.com"><img src="pics/samples/x1.JPG" /></a></div>
<div class="thumb"><a href="http://www.x.net" target="_blank">X.net</a><br>
<a href="http://www.x.net"><img src="pics/samples/x2.jpg" /></a></div>
</div>


thanks!!!!!!!!!!!!!

sixrfan
Oct 1st, 2009, 03:33 PM
anybody? thanks :thumbsup:

Excavator
Oct 1st, 2009, 04:17 PM
Maybe this will work for you - http://nopeople.com/CSS/thumbnail%20presentation/index.html
Check the source to see how it's done.

sixrfan
Oct 1st, 2009, 11:21 PM
thanks. that link helped. everything moved to the center of the page and my code is a lot cleaner now.

however i just cant seem to get the text that hyperlinks that describe the images to appear directly above them. right now they appear at the lower left of the images. any thoughts on how to fix? thanks so much!!!

HTML


<div class="thumb">
<p><span><a href="pics/samples/old.JPG" target="_blank">Before<img src="pics/samples/old_thumb.JPG" /></a></span></p>
<p><span><a href="http://www.XXXXXX.com/" target="_blank">After<img src="pics/samples/new_thumb.JPG" /></a></span></p>
</div>


CSS


.thumb {
text-align: center;
margin: 0px;
}
.thumb p {
display: inline;
}
.thumb span {
margin: 10px;
vertical-align: top;
width: auto;
height: auto;
display: table-cell;
display: inline-table;
display: inline-block;
}
/*. thumb p>span {
vertical-align:top;
}*/
.thumb p img {
margin-bottom: 5px;
border: none;
margin-top: 5px;
}
.thumb a {
text-decoration: underline;
}

sixrfan
Oct 5th, 2009, 07:29 PM
please please please. any chance someone can tell me how to put the final touches on this and get the text links above the images? thanks!

Scriptet
Oct 5th, 2009, 09:14 PM
Can't you just add a line-break after Before and After (<br> or <br /> if your using XHTML) ??

Or

put a <span> around each of the words and set them to display block?

sixrfan
Oct 5th, 2009, 09:45 PM
well i want the text "Before" and "After" to also be links. so dont i need to keep them inside of <a... and </a>. i'm kinda lost right now. :o

Scriptet
Oct 5th, 2009, 10:02 PM
well i want the text "Before" and "After" to also be links. so dont i need to keep them inside of <a... and </a>. i'm kinda lost right now. :o

Yeah you can keep them in there, I mean like this:


<div class="thumb">
<p><span><a href="pics/samples/old.JPG" target="_blank">Before<br><img src="pics/samples/old_thumb.JPG" /></a></span></p>
<p><span><a href="http://www.XXXXXX.com/" target="_blank">After<br><img src="pics/samples/new_thumb.JPG" /></a></span></p>
</div>

sixrfan
Oct 5th, 2009, 11:00 PM
that worked. thanks so much!!!