Center image horizontally within a div

Question

This is probably a stupid question but since the usual ways of center aligning an image are not working I thought I would ask. How can I center align (horizontally) an image inside its container div?

Here's the HTML and CSS. I've 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.

Answer 1

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;
    }

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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/