Question

我有一个容器（.inner）。它包含一个方形div（.square）并且响应迅速。我需要其中的图像垂直和水平居中。我不想使用后台网址属性。我的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;
    }

目前，我使用javascript为图像添加了一个类，用于横向图像以适合纵向和横向图像，css为方形容器的高度和宽度。

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

但我不知道如何集中他们。我已经在这里阅读了很多文章，但没有一篇文章有效。谢谢你的帮助

这里有一个我正在搜索的图片，如果可能的话也应该垂直工作： enter image description here

Answer 1

您的CSS正试图将.square本身居中，而不是包含的图像。 margin: auto;以及图像的绝对定位可以解决问题。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有一些解决方案，包括HTML和CSS。

如上所述，CSS提供了display属性 - 它可以为您提供所需的内容。尝试玩它 - 例如：

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

如果您想要其他非JavaScript选项，可以尝试在容器上设置flexbox。

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

.thumb {

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

}

这需要一些前缀来支持所有浏览器，因此设置更加复杂，但如果它是整个网站的常见元素，那么学习起来很棒。

请参阅http://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

3 个答案: