Center image horizontally within a div

HtmlCss

Html Problem Overview

How can I center align (horizontally) an image inside its container div?

Here's the HTML and CSS. I have also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}


<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.

Html Solutions

Solution 1 - Html

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/

Solution 2 - Html

CSS flexbox can do it with justify-content: center on the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start; to it.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Output:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}


<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Solution 3 - Html

I just found this solution below on the W3 CSS page and it answered my problem.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Source: http://www.w3.org/Style/Examples/007/center.en.html

Solution 4 - Html

This also would do it

#imagewrapper {
	text-align:center;
}

#imagewrapper img {
	display:inline-block;
	margin:0 5px;
}

Solution 5 - Html

The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

You can then apply the CSS class you created to your tag as follows:

HTML

<img class="center" src="image.jpg" />

You can also inline the CSS in your element(s) by doing the following:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

...but I wouldn't recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.

Solution 6 - Html

This is what I ended up doing:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Which will limit the image height to 600px and will horizontally-center (or resize down if the parent width is smaller) to the parent container, maintaining proportions.

Solution 7 - Html

I am going to go out on a limb and say that the following is what you are after.

Note, the following I believe was accidentally omitted in the question (see comment):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

So what you need is:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Solution 8 - Html

Add this to your CSS:

#artiststhumbnail a img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

Just referencing a child element which in that case is the image.

Solution 9 - Html

yeah, the code like this work fine

<div>
 <img/>
</div>

but just to remind u, the style for image

object-fit : *depend on u*

so the final code be like Example

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

div img {
  object-fit: contain;
}


<div style="border: 1px solid red;">
  <img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;" />
</div>

Final result

Solution 10 - Html

To center an image horizontally, this works:

<p style="text-align:center"><img src=""></p>

Solution 11 - Html

A responsive way to center an image can be like this:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Solution 12 - Html

Put an equal pixel padding for left and right:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

Solution 13 - Html

Put the picture inside a newDiv. Make the width of the containing div the same as the image. Apply margin: 0 auto; to the newDiv. That should center the div within the container.

Solution 14 - Html

Use positioning. The following worked for me... (Horizontally and Vertically Centered)

With zoom to the center of the image (image fills the div):

div{
	display:block;
	overflow:hidden;
	width: 70px; 
	height: 70px;  
	position: relative;
}
div img{
	min-width: 70px; 
	min-height: 70px;
	max-width: 250%; 
	max-height: 250%;    
	top: -50%;
	left: -50%;
	bottom: -50%;
	right: -50%;
	position: absolute;
}

Without zoom to the center of the image (image does not fill the div):

   div{
    	display:block;
    	overflow:hidden;
    	width: 100px; 
    	height: 100px;  
    	position: relative;
    }
    div img{
    	width: 70px; 
    	height: 70px; 
    	top: 50%;
    	left: 50%;
    	bottom: 50%;
    	right: 50%;
    	position: absolute;
    }

Solution 15 - Html

Center a image in a div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */


<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Solution 16 - Html

I have tried a few ways. But this way works perfectly for me

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

Solution 17 - Html

you can align your content using flex box with minimum code

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;


.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}


<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js fiddle link https://jsfiddle.net/7un6ku2m/

Solution 18 - Html

If you have to do this inline (such as when using an input box),
here is a quick hack that worked for me: surround your (image link in this case)
in a div with style="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

Solution 19 - Html

<div class="document">
  <img src="./images/icon-document.svg" alt="icon-document" />
</div>


.document {
  align-items: center;
  background-color: hsl(229, 57%, 11%);
  border-radius: 5px;
  display: flex;
  height: 40px;
  width: 40px;
}

.document img {
  display: block;
  margin: auto;
}

Solution 20 - Html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		
		
      <style>
	  body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
	  }
	  .thirddiv{
	  float:left;
	  width:100vw;
	  height:100vh;
	  margin:0px;
	  background:olive;
	  }
	  .thirdclassclassone{
	  float:left;   /*important*/
	  background:grey;
	  width:80vw;
	  height:80vh; /*match with img height bellow*/
	  margin-left:10vw; /* 100vw minus "width"/2    */
	  margin-right:10vw; /* 100vw minus "width"/2   */
	  margin-top:10vh;
	  }
	  .thirdclassclassone img{
	  position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
	height:80vh; /*match with parent div above*/
	
	/*--------------------------------
	margin-top:5vh;
	margin-bottom:5vh;
    ---------------------------------*/
	/*---------------------set margins to match total  height of parent di----------------------------------------*/
	  }
    </style>	       
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>		
</body>
</html>

Solution 21 - Html

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Solution 22 - Html

Style.css

img#center-img{

 display: block;
 margin: auto;
}

Html

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>

Solution 23 - Html

To center a image use this css. You have to give width at first of the image.

img{
  width: 300px;
  position: fixed;
  left0;
  right:0;

}
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

How many levels of pointers can we have?

C++CPointersLanguage LawyerLimit

Next Solution:

What does status=canceled for a resource mean in Chrome Developer Tools?

DebuggingHttpGoogle ChromeDeveloper ToolsWeb Developer-Toolbar

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJacob WindsorView Question on Stackoverflow
Solution 1 - HtmlMarvoView Answer on Stackoverflow
Solution 2 - Htmlm4n0View Answer on Stackoverflow
Solution 3 - Htmlmk.hdView Answer on Stackoverflow
Solution 4 - HtmlMehmet YadenView Answer on Stackoverflow
Solution 5 - HtmlKevinView Answer on Stackoverflow
Solution 6 - HtmlChernoView Answer on Stackoverflow
Solution 7 - HtmlJared FarrishView Answer on Stackoverflow
Solution 8 - HtmlkarlzafirisView Answer on Stackoverflow
Solution 9 - HtmlMark SparrowView Answer on Stackoverflow
Solution 10 - Htmlkalariya parikshithView Answer on Stackoverflow
Solution 11 - HtmlAli SafariView Answer on Stackoverflow
Solution 12 - HtmlV-SHYView Answer on Stackoverflow
Solution 13 - HtmlSetuView Answer on Stackoverflow
Solution 14 - HtmlThomasAFinkView Answer on Stackoverflow
Solution 15 - HtmlanteloveView Answer on Stackoverflow
Solution 16 - HtmlIfwat IbrahimView Answer on Stackoverflow
Solution 17 - HtmlSantosh KhalseView Answer on Stackoverflow
Solution 18 - HtmlSherylHohmanView Answer on Stackoverflow
Solution 19 - HtmlNick GMView Answer on Stackoverflow
Solution 20 - HtmlKES NORKUSView Answer on Stackoverflow
Solution 21 - HtmlSiva KaliyamoorthyView Answer on Stackoverflow
Solution 22 - HtmlCallumView Answer on Stackoverflow
Solution 23 - HtmlSk ShoyebView Answer on Stackoverflow