How can I adjust text and image alignment in my collection pages?

Awesome!

For the alignment, add this to the bottom of your component-collection-here.css file:

.collection-hero__title+.collection-hero__description {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

table {
    margin: 0 auto !important;
}

h1.collection-hero__title {
    text-align: center;
}

And to make the image fit, add this to the bottom of your base.css file:

.media>img {
    object-fit: fill !important;
}