フッター部分の画像を中央配置にする方法

Question

前提・実現したいこと

html・css初学者です。
プロゲートで学んだことを一旦一からアウトプットしてみようと思い、課題で制作したものと似たようなサイトをローカル環境で作っています。
その中でどうしてもフッター部分の画像を中央に配置することができず、行き詰まってしまいました。
自分なりに出来ることはやってみたのですが、解決できませんでした。

発生している問題・エラーメッセージ

画像のように、コピーライトの画像が、左のバナー部分を除いた残り基準の中央に配置されてしまいます。
自分はサイト基準の中央に配置したいのですが、このバナー部分を無視して真ん中に配置できるような表記方法を教えていただけないでしょうか？
よろしければご教授お願いいたします。

該当のソースコード

        <footer>
            <div class="footercontents">
                <div class="banner"><img src="バナー.png"></div>
                <div class="copyright"><img src="コピーライト.png"></div>
            </div>
        </footer>
    </body>
</html>

.footercontents {
    display: flex;
}

.banner {
    margin: 10px 40px 10px;
}
.copyright {
    margin: 10px auto;
}

試したこと

「text-align: center;」や「inline-block;」を使った方法など、自分が調べられた中での中央寄せっぽい情報は一通り試してみたのですが結局出来ずじまいです。
よろしければご教授お願いいたします。

Answer 1

いろいろな方法はありますが、CSSのみ変更の場合のひとつとして

.footercontents {
  text-align: center;
  padding: 10px 0;
  position: relative;
}

.banner {
  position: absolute;
  top: 10px;
  left: 40px;
}
.copyright {
  margin: 10px auto;  /* ← 削除 */
}

Comments

[take-t.t.]

ご回答有り難うございます。
text-alignはその位置に入れて、属性をabsoluteに指定すればよかったんですね。
ざっくりとで学習を飛ばしてしまっていたposition属性の意味が少しわかった気がします。

ありがとうございました。

[yoshinavi]

各種positionを理解すると、レイアウトの幅が確実に広がりますので、これを機に理解を深めていただくと良いかと思います。

解決されて何よりです。
(^^)

Answer 2

Bootstrapなどのcssフレームワークを使っていないという前提ならこうしてはいかがでしょうか。

<div class="footercontents">
	<div class="banner col"><img src="バナー.png"></div>
	<div class="copyright col"><img src="コピーライト.png"></div>
</div>

.footercontents {
	display: flex;
}

.col {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.copyright {
	text-align: center;
}

Comments

[take-t.t.]

ご回答ありがとうございます。
数字で指定するのにこんなテクニックがあったんですね、キレイに真ん中に配置できました。

ありがとうございました。