テキストを中央配置し、左右逆寄せにデザインする方法 |CSS HTML|③

CSS

タイトルがややこしいのですが、こういう事です。

ページャーの下にそれぞれのページのディスプリクションを付けたいときなど。

コード

HTML

<div class="p-article-wp-pager">
    <div class="page-numbers-container">
        <p class="post-page-numbers">1</p>
        <a href="" class="post-page-numbers"><p>2</p></a>
    </div>
　　<br>
    <div class="kontena">
        <div class="yagami-left">&#8636; 月別アーカイブを<br>任意の場所に置く方法</div>
        <div class="yagami-right">カレンダーのボタンに<br>アニメーションをつける &#8640;</div>
    </div>
</div>

CSS

.kontena {
    display: flex;
    margin: 0 auto;
}
.page-numbers-container {
    display: flex;
    justify-content: center;
}
.yagami-left {
    text-align: right;
    width: 50%;
  background: #fd94bd;
}
.yagami-right {
    width: 50%;
    background: #e6ffcc;
}

.post-page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #ddd;
    border-radius: 50%;
    margin: 0 5px;
}
.p-article-wp-pager {
    margin: 24px auto;
}

コードの解説

kontenaクラスからyagami-rightクラスまでの各クラスについて、詳細な説明。

.kontena クラス:
- display: flex;: kontenaクラスは、その中に配置された要素を水平に横並びに配置するためにFlexboxを使用しています。これにより、内部の要素を左から右に並べることができます。
- margin: 0 auto;: kontenaクラスの外側の余白を上下にゼロ（0）に設定し、左右の余白を自動的に均等に設定します。これにより、コンテナ全体が水平方向に中央に配置されます。
.page-numbers-container クラス:
- display: flex;: page-numbers-containerクラスもFlexboxを使用しており、ページ番号要素を水平に中央配置します。
- justify-content: center;: page-numbers-container内の要素の水平配置を中央寄せにします。これにより、ページ番号が中央に表示されます。
.yagami-left クラス:
- text-align: right;: yagami-leftクラスは、テキストの水平配置を右寄せに設定します。このクラスが適用された要素内のテキストは、右端に配置されます。
- width: 50%;: yagami-leftクラスの幅を親要素の50%に設定し、画面の左半分を占めます。
.yagami-right クラス:
- width: 50%;: yagami-rightクラスの幅も親要素の50%に設定し、画面の右半分を占めます。