How can i align text under a linked image using html?

I'm creating a web page and a part of the page has several images that are linked, but i want to add text that is aligned underneath the linked images. All i can find is how to align text left and right but never under or even on top. I basically want my images and text to look similar to the way youtube has it (see link).





http://youtube.com/profile_videos?user=C...

How can i align text under a linked image using html?
Tell me you're not typing this out manually...





What I would do is make a two row, one column table with 0 border width. Then put the image in the top, the linked text in the bottom. Center the text and it should center in the table.
Reply:I've allways created all my websites using notepad, and notepad++ on bigger projects. WYSIWYG editors are not being used right by most the webdesigners who use them, they are abusing tags incorrectly to force a paticuler rendering; and many are still incorrectly using forced spaces to force a paticuler rendering of their page.





Tables are actualley some of the easiest to make in a standard text-editor. However tables are not the correct way to design websites; tables should never be used to layouting pages, its an old and incorrect practice, which for some reason hasn't been abandoned yet.





There was a time where tables where our only choice, but today we use CSS, see http://www.brugbart.com/?AID=6 - An Introduction to CSS








The way i would go about creating text on top of an image, aligned either twords the top or bottom. Would clearly be to use CSS position, but this is not something learned by copy pasting code, lots of things may go wrong cross-browser.





Depending on the layout you have, you may be able to use the below code:


-----StartCode-----


%26lt;div style="position: relative;" id="Basement"%26gt;


%26lt;img src="MyImage.png" alt="Image"%26gt;


%26lt;p style="position:absolute;top:2em;left:0;... is a Paragraph%26lt;/p%26gt;


%26lt;/div%26gt;


-----CodeEnd-----





You may wan't to apply the image as a background-image to a division to make things easier.





The Basement is the wrapper for the rest of the content, most websites have some kind of wrapper after the body.





You can change "left:0;" to "right:0;" if you want the text at the right side instead.








In case you want the text to be below the image, simply inclose each image in a division, togetter with the text. This is much easier, and faster then incorrectly using a table to achive the effect.





-----StartCode-----


%26lt;div style="position: relative;" id="Basement"%26gt;


%26lt;div style="float:left;width:120px;height:240... class="ImgLink"%26gt;


%26lt;img src="MyImage.png" alt="Image"%26gt;


%26lt;p%26gt;This is a Paragraph%26lt;/p%26gt;


%26lt;/div%26gt;


%26lt;/div%26gt;


-----CodeEnd-----





You can even do it without the divisions , but it would quickly become more complex.





To avoid confusion, lets take a look at what we got. The full code is below, (including a valid doctype).


-----StartCode-----


%26lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"%26gt;


%26lt;html lang="en"%26gt;





%26lt;head%26gt;


%26lt;title%26gt;My first Website%26lt;/title%26gt;


%26lt;style type="text/css"%26gt;


/* This is a Comment


You can add the CSS here, for your own convenience


See also: http://www.brugbart.com/?AID=11 - Comments in CSS


*/





%26lt;/style%26gt;


%26lt;/head%26gt;





%26lt;body%26gt;


%26lt;div style="position: relative;top:0;"%26gt;


%26lt;p style="width:120px;height:240px;float:le... src="MyImage.png" alt="Image" style="width: 98%;"%26gt;This is a





Paragraph%26lt;/p%26gt;


%26lt;p style="width:120px;height:240px;float:le... src="MyImage.png" alt="Image" style="width:





98%;"%26gt;This is a Paragraph%26lt;/p%26gt;


%26lt;/div%26gt;


%26lt;/body%26gt;





%26lt;/html%26gt;


-----CodeEnd-----





I simply used normal paragraphs in the last example, applyed a width and a height, then floated the paragraphs to the left, to get them to line up. The CSS is a tiny bit more complex, but should make sense. As such there is no need to incorrectly use tables, or turn to div-it-is. Even though div-it-is dosn't do any harm, other then to the document size.





Paragraphs are allready block-level elements by default, therefor we can easily apply a width/height to them, and float them to the left or right, to achieve the desired effect.





Last (but not least), i applyed a left-margin to the paragraph after the first, all paragraphs who comes after should have the same left-margin applyed. This is optional, but it dose add some contrast to the layout.





Note, the entries will start "a new line" when there isn't anymore space horizontally.