Jump to content

Recommended Posts

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.

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)

 

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.