homepage Welcome to WebmasterWorld Guest from 54.166.108.167
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to Centralize Div Box
franciscrick




msg:4469121
 7:49 am on Jun 25, 2012 (gmt 0)

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




msg:4469299
 4:15 pm on Jun 25, 2012 (gmt 0)

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




msg:4469554
 6:03 am on Jun 26, 2012 (gmt 0)

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




msg:4469693
 3:38 pm on Jun 26, 2012 (gmt 0)

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




msg:4470700
 10:05 pm on Jun 28, 2012 (gmt 0)

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;

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved