Aligning an image with CSS - html

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

You can try to apply the style to the container DIV.
.sponsors {
text-align: center;
}

Answer 2

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