Page 1 of 1

centering text beneath image

Posted: Wed Feb 02, 2011 1:59 pm
by TorMike
Help.

I need to center the name of the user below there default image.

The image reside in a div:
#topSix {
position:relative;
top: 10px;
left: 10px;
width: 840px;
margin-top:1px; margin-bottom:1px;
padding: 5px 5px 5px 5px;
text-align: center;
}
On prototype website:

[text] <div id="topSix">
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/55~new_img_0004.jpg" width="100" height="100" border="0" />
</a>
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/14~014.jpg" width="100" height="100" border="0" />
</a>
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/17~josh.jpg" width="100" height="100" border="0" />
</a>
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/1~minilarge.jpg" width="100" height="100" border="0" />
</a>
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/6~scooby1.jpg" width="100" height="100" border="0" />
</a>
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/6~scooby2.jpg" width="100" height="100" border="0" />
</a>
</div>
[/text]

Please see attach screen capture to see how it is display in my prototype.

Re: centering text beneath image

Posted: Wed Feb 02, 2011 3:26 pm
by Jade
Put each photo in it's own div.

[text]
<div id="topSix">
<div class="image">
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/55~new_img_0004.jpg" width="100" height="100" border="0" /><br/>Username Here </a>
</div>
<div class="image">
<a href="profile.php">
<img src="http://img.picfrisky.com/gallery/55~new_img_0004.jpg" width="100" height="100" border="0" /><br/>Username Here </a>
</div>
</div>
[/text]

Re: centering text beneath image

Posted: Fri Feb 04, 2011 9:15 am
by TorMike
Great.

I tried it and it works but instead of lining up horizontality they lined up verticality. I guessing that's an easy fix via CSS.

Thanks

Re: centering text beneath image

Posted: Fri Feb 04, 2011 9:56 am
by John Cartwright

Code: Select all

div.image {
   float: left;
   width: 130px; /** Change this to however big the images are -10px to account for padding **/
   padding: 5px;
} 

Re: centering text beneath image

Posted: Fri Feb 04, 2011 12:32 pm
by TorMike
Thanks again.

I forgot to write the class image. Never said I was smart.

My class just had a float:left;

I like your and I'll have to play around with the size and stuff.

As you can probably tell I'm sort of new to CSS.