Skip to content
Fix Code Error

How to make an image center (vertically & horizontally) inside a bigger div

March 13, 2021 by Code Error
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

Related Articles

  • insert tables in dataframe with years from 2000 to 20018…
  • Pandas pivot_table: filter on aggregate function
  • SQL find sum of entries by date including previous date
  • Obtain most recent value for based on index in a pandas…
  • I need to sum values with specific condition
  • Centering in CSS Grid
  • Add calculated column to df2 for every row entry in df2…
  • In CSS Flexbox, why are there no "justify-items" and…
  • Vertical Align Center in Bootstrap 4
  • Cannot make table responsive

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How to retrieve the hash for the current commit in Git?

Next Post:

How to put the legend out of the plot

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error