方形响应容器中的中心图像

Question

我有一个容器 (.inner)。它包含一个正方形 div (.square) 并且是响应式的。我需要其中的图像垂直和水平居中。我不想使用背景 url 属性。我的 html 标记：

<div class="thumb">
    <div class="square">
        <a href="">
           <img src=""/>
        </a>
    </div>
</div>

我的方块在 css 中的工作原理：

.thumb {
    position: relative;
    width: 100%;
    }

.square{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow:hidden;
    display: inline-block;
    vertical-align: middle;
    }

目前，我为横向图像添加了 class 和 javascript 以适应纵向和横向图像，并且 css 适合方形容器的高度和宽度。

img {
    max-width: 100%;
    height: auto;
    width: auto;
    }
img.landscape {
    max-width: none;
    height: 100%;
    width:auto!important;
    }

但我不知道如何将它们居中。我已经在这里阅读了很多文章，但其中 none 有效。感谢帮助

这是我正在搜索的图片，如果可能的话也应该垂直显示：

Answer 1

HTML 和 CSS 中都有一些解决方案。

如上所述，

CSS 提供显示属性 - 这正是您要查找的内容。尝试使用它 - 例如：

.MyImageStyle
{
display: block;
// If this doesn't work, feel free to try inline-block, and the other possibilitys.
}

<div class="thumb">
<div class="square">
    <a href="">
       <img src="" class="MyImageStyle"/>
    </a>
</div>

不太优雅的解决方案是 HTML - 您可以在图像周围使用标签，这可能适用于某些浏览器的特定显示（但它确实取决于元素的相对位置和这一页）。一个好的尝试可能是

<center> The rest goes in here </center>

祝你好运！

Answer 2

您的 CSS 试图将 .square 本身而不是包含的图像居中。 margin: auto; 加上图像的绝对定位就可以了。

这是一个展示如何居中的简单示例；您可以修改它以满足您的需要。降低图像的不透明度以表明它在其容器内水平和垂直居中。 JavaScript 为容器的高度和宽度设置动画以模拟响应。

http://jsfiddle.net/6py8o6b8/4/

TweenMax.to($(".square"), 2, {
  width: "100%",
  height: "250px",
  repeat: -1,
  repeatDelay: 1,
  yoyo: true,
  ease: "linear"
});

.square {
  border: 2px solid red;
  height: 100px;
  position: relative;
  width: 100px;
  margin: 70px auto;
}
img {
  position: absolute;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  margin: auto;
  opacity: 0.5;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="square">
  <img src="http://www.collativelearning.com/PICS%20FOR%20WEBSITE/stills%202/black%20screen.jpg" />
</div>

Answer 3

如果您想要另一个非 JavaScript 选项，您可以尝试在您的容器上设置 flexbox。

这通常是我在父容器中垂直和水平居中项目的方法。

.thumb {

  justify-content: center;
  align-items: center;
  display: flex;

}

这需要一些前缀才能支持所有浏览器，因此设置起来会稍微复杂一些，但如果它是整个网站的常见元素，那还是值得学习的。

见http://css-tricks.com/snippets/css/a-guide-to-flexbox/

方形响应容器中的中心图像

center image in a square responsive container

html

css

centering