使用CSS

Question

我正在尝试使用CSS来居中图像，我很确定我在CSS中使用了正确的选择器，因为我已经调整了图像大小，但我无法正确对齐。

我的HTML：

</br>
<div class="copyright">
  <em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
</div>
</br>
<div class="sponsors">
  <a href="https://craneflight.org">
    <img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb" />
  </a>
</div>

这是我为CSS尝试的内容：

.sponsors>img {
  display: inline-block;
  vertical-align: middle;
}    

.sponsors>img {
  display: inline-block;
  vertical-align: middle;
}
img.thumb {
    width: 100px;
    height: 150px;
}

</br>
<div class="copyright">
  <em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
</div>
</br>
<div class="sponsors">
  <a href="https://craneflight.org">
    <img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb" />
  </a>
</div>

和

.sponsors>img.align-center {
  display: block;
  margin: 0px auto;
}

.sponsors>img.align-center {
  display: block;
  margin: 0px auto;
}
img.thumb {
    width: 100px;
    height: 150px;
}

</br>
<div class="copyright">
  <em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
</div>
</br>
<div class="sponsors">
  <a href="https://craneflight.org">
    <img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb align-center" />
  </a>
</div>

我正在尝试让图像在下面的页面底部对齐，其中显示“两个绿色的THUMBS 2013©版权所有”，但我无法理解。我查看了多个类似的问题，其他解决方案似乎都没有在这种情况下工作。可能是我没有正确使用选择器吗？

编辑：我用“拇指”类选择器调整了图像大小，因为会有几个图像，它们都需要大小相同。这是代码：

img.thumb {
    width: 100px;
    height: 150px;
}

Answer 1

尝试将其与div对齐：

<div class="sponsors" align="center">
<a href="https://craneflight.org">
<img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb"/>
</a>
</div>

Answer 2

您可以尝试将样式应用于容器DIV。

.sponsors {
    text-align: center;

}

Answer 3

我在两个元素周围添加了一个容器，并使其成为一个内联块（因此它只是其内容的宽度并保持不变）。 然后，通过将text-align-center应用于.sponsors DIV，我将图像置于该容器内。我还使用text-align: center将顶行居中与图像居中对齐。

顺便说一句：你的图像有一个错误的CSS选择器。 div和图像之间有一个a标记，因此.sponsors>img不会产生任何影响。 .sponsors>a>img或.sponsors img

.container1 {
  display: inline-block;
}
.copyright {
  text-align: center;
}

.sponsors {
  text-align: center;
}

.sponsors img {
  width: 100px;
  height: 150px;
}

<div class="container1">
  <div class="copyright">
    <em>TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED</em>
  </div>

  <div class="sponsors">
    <a href="https://craneflight.org">
      <img src="https://greenthumbsfarm.com/wp-content/uploads/2017/07/CRANE-FLIGHT-COMP-2-1.jpg" alt="crane-flight-logo" class="thumb" />
    </a>
  </div>
</div>