BootstrapもしくはCSSでテキストを左揃えにしつつ中央寄せしたい

Question

前提・実現したいこと

BootstrapもしくはCSSでテキストを左揃えにしつつ中央寄せしたいです
個人情報が入ってるのでぼやかしていますが、会社名と本社の住所、支店の住所
それぞれ左揃えにしつつ中央寄せしたいです。
また、幅を狭めたときにテキストの位置をメインの記事の真下に持ってきたいのですが、左揃えにしつつ中央寄せでその形になりますか？

該当のソースコード

<footer class="h5 mt-5 mb-n1 bg-secondary text-white">
            <div class="w-100">
                会社名がはいるよおおお
            </div>
            <dl class="h6">
                <dt>【本社】</dt>
                <dd>〒999-9999 住所が入るよあああ</dd>
                <dt>【あああ作業所】</dt>
                <dd>〒000-0000 じゅうしょが入るよああああ
                </dd>
            </dl>
            <p class="h6">COPYRIGHT(C)aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        </footer>
    </body>
</html>

/* footer */
footer {
    white-space: nowrap;
    width: 100%;
    height: 160px;
    padding: 20px 100px;
}
footer > div,dl {
	text-align: center;
	display: block;
}
footer > p {
    text-align: left;
	display: inline-block;
}

試したこと

上記のCSSにもありますが、
footer > div,dl {
text-align: center;
display: block;
}
footer > p {
text-align: left;
display: inline-block;
}
を試しましたが、うまくいきません
bootstrapにもこれにあたるCSSが見当たらないので質問させていただきました。

補足情報（FW/ツールのバージョンなど）

Windows１０　bootstrap4

追記

Copyright は中央寄せにしますか？

コチラは右寄せにしたいのですが、幅を狭めたときは中央に寄せたいです。

Comments

[s8_chu]

Copyright は中央寄せにしますか？

[HozDer]

>Copyright は中央寄せにしますか？
コチラは右寄せにしたいのですが、幅を狭めたときは中央に寄せたいです。

Answer 1

質問者さんの実現したいことは、 CSS Grid Layout を用いて、以下のように行なえると思います(動作確認用リンク)。

<footer class="h5 mt-5 mb-n1 bg-secondary text-white">
            <div class="w-100">
                会社名がはいるよおおお
            </div>
            <dl class="h6">
                <dt>【本社】</dt>
                <dd>〒999-9999 住所が入るよあああ</dd>
                <dt>【あああ作業所】</dt>
                <dd>〒000-0000 じゅうしょが入るよああああ
                </dd>
            </dl>
            <p class="h6">COPYRIGHT(C)aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        </footer>
    </body>
</html>

footer {
  width: 100%;
  min-height: 160px;
  padding: 20px 100px;
  display: grid;
  grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
  grid-template-rows: repeat(3, auto);
}

div, dl {
  grid-column: 2;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
}

Comments

[HozDer]

失礼、ベストアンサー出した後に申し訳ないのですが、
エディター上でエラーが発生しています。
これは気にする必要のないエラーなのでしょうか？

footer {
width: 100%;
min-height: 160px;
padding: 20px 100px;
display: grid;
grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
grid-template-rows: repeat(3, auto);
}

これの　grid-template-columns: minmax(20%, 1fr)auto minmax(20%, 1fr);
この部分でエラー発生しています。

[HozDer]

ちなみに　スタイルの適応に関しては問題ないです。

[s8_chu]

気にする必要はないと思いますが、もし心配であれば、エラー内容などの詳細を記述した上で、別の質問として投稿してください。

[HozDer]

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

[HozDer]

問題がありましたので報告しておきます。
s8_chuさんのコードを参照したところ以下の問題が発生しました。
https://teratail.com/questions/196137
こちらの自己解決にすべて記載しておりますが、
簡単にまとめるとCSS変更時の反応が遅いor無い状態が続きいろいろ模索した結果。
今回教えていただいた、コードが原因であることが分かりました。

参考までによろしくお願いします。