centering text beneath image

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
TorMike
Forum Newbie
Posts: 17
Joined: Thu Feb 25, 2010 9:14 am

centering text beneath image

Post 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.
Attachments
Top six need name below image
Top six need name below image
topsix.png (183.96 KiB) Viewed 1726 times
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: centering text beneath image

Post 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]
TorMike
Forum Newbie
Posts: 17
Joined: Thu Feb 25, 2010 9:14 am

Re: centering text beneath image

Post 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
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: centering text beneath image

Post 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;
} 
TorMike
Forum Newbie
Posts: 17
Joined: Thu Feb 25, 2010 9:14 am

Re: centering text beneath image

Post 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.
Post Reply