How to Centralize Div Box

[franciscrick]

hi guys,

i need some advice on how to tweak the css code to make the text box aligned to the middle of the slideshow stroller here.

As you can see, the caption is always aligned left of the picture. This is frustrating because it doesn't look nice from a user stand point.

Could anyone help with offering advice to centralizing the caption?

frnkc

This is the code from the CSS file below...


/*Caption Version*/
.scrollgallery .imageareaContent .caption_container{
position:relative;
display:inline;
margin:0px 5px 0px 5px;
}
.scrollgallery .imageareaContent .caption_container div {
position:absolute;
display:inline;
padding:5px 10px 5px 10px;
background-color:#fff;
margin:0px;
margin-top:0px;
z-index:auto;
top:0px;
left:0px;
line-height:13px;
}

[edited by: alt131 at 5:11 pm (utc) on Jun 25, 2012]
[edit reason] Thread Tidy [/edit]

[rocknbil]

Welcome aboard franciscrick, please read the TOS and the rules regarding site links. instead of

margin:0px;
margin-top:0px;

apply margin: auto to the left/right.

margin:0 auto; /* shorthand for 0 auto 0 auto */

I don't see why you need a div inside a div, this just contributes to div-itis. Second a div is a generic container for dividing up page layout, if you're going to use an HTML5 doctype and it's a caption use <caption> instead.

<div id="imagearea_1" class="imagearea">
<caption>This is a caption</caption> (.... etc.)

.scrollgallery .imageareaContent caption {
position:absolute;
display:inline;
padding:5px 10px; /* again, shorthand */
background:#fff;
margin:0 auto; /* shorthand for 0 auto 0 auto */
z-index:auto; /* should really put a value here but it works because of the source order */
top:0;
left:0;
line-height:13px;
}

[franciscrick]

hi rocknbil,

i changed the code to what you showed above. However, nothing's changed. the caption box is still aligned to the bottom left of the picture.

I would appreciate it if you could further advice what changes should be made.

Thanks alot! fncis

[rocknbil]

OOPS. My mistake. You have it absolutely positioned, margin: auto won't work :-/ You can try changing the left position, but then it will be a fixed position and won't work if the content changes in size. Or, go ahead and do that, the set the width to a fixed width inside the pic container, and just text-align: center the text inside it. Or try left: 50%;

[legaleagle]

If the absolute position div is a child of overall layout you should be able to center it using margin and pixels ie margin-left:200px;