Center align image within div horizontally

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

Heres the HTML:

<!--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>

Heres the 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-color: #DADADA;
  border-style: solid;
  border-width: thin;
  font-size: 15px
}

#thumbnailwrapper:hover {
  box-shadow: 0 0 5px 5px #DDDDDD
}

#artiststhumbnail {
  width: 120px;
  height: 108px;
  overflow: hidden;
  border-color: #DADADA;
  border-style: solid;
  border-width: thin;
  background-color: white;
}

#artiststhumbnail:hover {
  left: 50px
}

#genre {
  font-size: 12px;
  font-weight: bold;
  color: #2A2A2A
}

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.

---

The CSS Guy suggests the following:

So, translating, perhaps:

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

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/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

---

CSS flexbox can do it with justify-content: center on the image parent element.

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;
}
.image-3 {
  width: 300px;
}

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

链接地址: http://www.djcxy.com/p/75702.html

上一篇: 水平和垂直居中放置DIV

下一篇: 居中对齐div内的图像水平