用CSS对齐图像

Question

I am trying to center an image using CSS and Im pretty sure I am using the correct selector in CSS because I have resized the image, but I cant get it to align properly.

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

Here's what i tried for 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> 

and

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

I am trying to get the image to align at the bottom of the page below where it says "TWO GREEN THUMBS 2013© ALL RIGHTS RESERVED", but I just can't figure it out. I have looked through multiple similar questions and none of the other solutions seem to be working in this case. Could it be I am not using the selector properly?

EDIT: I have the image resized with the "thumb" class selector because there will be several images and they will all need to be the same size. Here's the code:

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

Answer 1

Try to aligning it with the 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

You can try to apply the style to the container DIV.

.sponsors {
    text-align: center;

}

Answer 3

I added a container around both elements and made that an inline-block (so it would be only the width of its contents and stay left) . Then I centered the image inside that container by applying text-align-center to the .sponsors DIV . I also centered the top line to be center aligned with the image using text-align: center .

BTW: You had a wrong CSS selector for the image. There is an a tag between the div and the image, so .sponsors>img won't have any effect. Either .sponsors>a>img or just .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>