INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Centering Large Image within a Child Div

Centering Large Image within a Child Div

(OP)
Hello,

I'm having a vexing problem that's driving me nuts.

Simply, I have a parent div and a single child div within it. In the child div, I would like to insert a single image, however, the image may be larger than the dimensions of the child div. I would like the image to be centred horizontally and vertically. Any help with my code below would be greatly appreciated.

Here's what I have:

HTML:

CODE

<div id="parent"><div id="child"><img src="image1.jpg" /></div></div>


CSS:

CODE

#parent { /* The parent spans the width of the browser */
    width: 100%; height: 305px; background-color: white; display: block;
}

#child { /* The child should fit within the parent and is centred */
    width: 960px; background-color: #CCC; border: 1px solid #999; height: 305px; margin: 0 auto;
}

#child img { /* How do I center my image within the child div? My code here doesn't work :(  */
 display: inline-block; margin: 0 auto; overflow: hidden;
}


Thanks,
ds.

RE: Centering Large Image within a Child Div

The easy way? Remove the display:inline-block from the image, and add a text-align:center to your child div.

CODE -->

#child { /* The child should fit within the parent and is centred */
width: 960px; background-color: #CCC; border: 1px solid #999; height: 305px; margin: 0 auto; 
}

#child img { /* How do I center my image within the child div? My code here doesn't work :(  */
 margin: 0 auto; overflow: hidden; text-align:center;
} 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close