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 Link to comment https://forums.phpfreaks.com/topic/234854-floating-thumbnails-images-and-centering-caption/ 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. Link to comment https://forums.phpfreaks.com/topic/234854-floating-thumbnails-images-and-centering-caption/#findComment-1206937 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/ Link to comment https://forums.phpfreaks.com/topic/234854-floating-thumbnails-images-and-centering-caption/#findComment-1206958 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) Link to comment https://forums.phpfreaks.com/topic/234854-floating-thumbnails-images-and-centering-caption/#findComment-1206973 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. Link to comment https://forums.phpfreaks.com/topic/234854-floating-thumbnails-images-and-centering-caption/#findComment-1206986 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.