Next.js アプリの中央ボタン コンポーネント?

Question

nextjs ページの独自の行にあるボタンを使用しています。 PCとモバイルの両方で最も見栄えが良いと思うので、ボタンをページの中央に表示したいのですが、何を試してもボタン要素がページの左端の元の位置から移動できないようです。ページ。

margin-left と margin-right を特定のパーセントに手動で設定して、ボタンのテキストを次の行に押し込むことなく、ボタンをできるだけページの中央近くに移動します。これが私が見つけた唯一の方法です。ボタンは動きますが、見栄えも悪く、実用的ではありません。ページの状態に応じて、ボタン内のテキストの長さが異なる場合があるため、ハードコーディングされた左右の余白は実際にはボタンの中央に配置されません。

「margin: auto;」、text-align/align-items/justify-content: center; を試し、さらにボタンを div でラップし、CSS を使用してボタンを div ではなく div の中央に配置しようとしましたボタンが優れています。

これは私の現在のコードです:

リーリー リーリー リーリー ああああ

Answer 1

CSS の display:flex 属性を忘れたようです。 pd-container クラスに、display:flex; flex-direction:column; justify-content:center; align-items:center; を追加する必要があります。 display:flex については、https://www.w3schools.com/css/css3_flexbox.asp で学習できます。 display:flex がないと、align-items プロパティと justify-content プロパティは効果がありません。 justify-content は表示方向の主軸を処理し、align-items は表示方向の交差軸を処理します。 したがって、display-direction が row の場合、justify-content は水平軸を処理し、align-items は垂直軸を処理します。 お役に立てば幸いです。 ありがとう。