co.ador Posted April 27, 2011 Share Posted April 27, 2011 I know my semantics are not good except for the form, need some help on centering caption and Link to live site Quote Link to comment Share on other sites More sharing options...
co.ador Posted April 27, 2011 Author Share Posted April 27, 2011 Ok so far I have gotten all of it, less centering the caption with the image through the parent <a> tags I have tried as below #navigator ul li a { float:left; padding: 0 0 0 0; margin:0 auto 0 1em; } #navigator ul li a p{ padding: 0 0 0 0; margin:0 auto 0 auto; } with no avail. Quote Link to comment Share on other sites More sharing options...
co.ador Posted April 27, 2011 Author Share Posted April 27, 2011 live site where you can edit and update http://jsfiddle.net/8Ewjq/1/ Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 27, 2011 Share Posted April 27, 2011 Hi Co.Ador to vertical align a caption that consists of just 1 line (like in your case) You can set the Line height of the text to the height of the image. to align to the center, you need a block element such as a <p> or a <div> and put text-align: center on it. so in your case. Note though by default a <p> element has margin at the top and bottom. so it's easier to use a div, unless you use a reset.css (see sticky) Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 27, 2011 Share Posted April 27, 2011 had some time left, so here is an example of a div with an image in it, and a caption. by the way i saw you were using tables. (that's not what they are meant for) try this out and play with it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title>caption</title> <style type="text/css"> .caption { position:relative; width:150px; height:150px; overflow:hidden; border:3px solid #333; z-index: 1; } .caption img { position:absolute; top:0; left:0; z-index: 0; } .caption p { line-height: 150px; /* this is the eact same height of the div,making it vertical aligned */ margin: 0; /* if you use a reset.css this is not needed */ padding: 0; /* idem */ position: relative; text-align: center; color:#fff; font-weight: bold; } </style> </head> <body> <div class="caption"> <img src="http://i54.tinypic.com/fvy3kp.jpg" alt="" /> <p class="text">your caption</p> </div> </body> </html> you can of course add a float to the container div so you can let multiple image float next to each other. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.