How to make an image center (vertically & horizontally) inside a bigger div
Posted By: sleepy
I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.
How can it be done?
I am able to get it centered horizontally by using text-align: center
for the div. But vertical alignment is the issue..
Solution
Personally, I’d place it as the background image within the div, the CSS for that being:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(Assumes a div with id="demo"
as you are already specifying height
and width
adding a background
shouldn’t be an issue)
Let the browser take the strain.
Answered By: bochgoch
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.