居中对齐水平方向的图像 [英] Center align image within div horizontally

问题描述

这可能是一个愚蠢的问题，但由于中心对齐图像的通常的方法不工作，我想id问。

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?

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

除了css之外，我还包括了缩略图其他元素的css。它以递减的顺序运行，所以最高的元素是一切的容器，最低的是在一切之内。

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
}

好吧， PHP中应该更容易看到。这两种解决方案似乎都在实践中工作。顶部和底部的文本不能居中，图像应在其容器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.

推荐答案

这个家伙建议以下：

因此，翻译，可能：

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

编辑：最后得到了创建一个小玩意的帐户。这里是我的解决方案： http://jsfiddle.net/marvo/3k3CC/2/

第二个修改：将.artiststhumbnail更改为#artiststhumbnail。

Second edit: Changing .artiststhumbnail to #artiststhumbnail.

这篇关于居中对齐水平方向的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！