CODEWITHSUNDEEP
css
Lyver Kinkki
Lyver Kinkki

Reputation: 227

How to center an image inside div both vertically and horizontally?

.spotlight-area img {
    width: 100px; 
    height: 100px; 
    margin-top: 30%; 
    margin-left: 40%; 
}

spotlight-area will be a div with random width and height. The image I'm using is 100px to 100px (resized). I've tried to center it with margin-top and margin-left but it looks like a crappy workaround.

What would you suggest?

Ps. It's a play button going to appear on top of videos container divs.

Upvotes: 0

Views: 251

Answers (4)

Sri
Sri

Reputation: 2273

I guess this will work, Try and let know...

 .spotlight-area img {
        width: 100px; 
        height: 100px; 
        text-align: center;
    }

Upvotes: 0

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

vertical-align: middle;
text-align: center;

It will help you...

clck on this link

Upvotes: 1

Matt Whitehead
Matt Whitehead

Reputation: 1801

Check this article out by Chris Coyier on CSS-Tricks. I think it might help out. I ran into the same problem a few days ago and his answer worked for me.

Centering an image horizontally and vertically

Basically the idea is, if your image has a set width and height. You can absolute position it from the left and top 50% and then do negative margins equal to half of the width and height to bring it back dead center. They're are other ways to vertically center an image if it doesn't have set dimensions.

Upvotes: 1

Sirtarius
Sirtarius

Reputation: 128

Mybe this will work:

   .spotlight-area { text-align: center; }

Upvotes: 0

Related Questions