HTMLとCSSを使用してテキストを水平および垂直に中央揃えする方法

2024-02-14 07:20 HTML CSS テキスト

  1. テキストを水平に中央揃えする方法: HTML:

    <div class="container">
 <p class="centered-text">テキストを中央揃えする例</p>
</div>

    CSS:

    .container {
 display: flex;
 justify-content: center;
}
.centered-text {
 text-align: center;
}

  2. テキストを垂直に中央揃えする方法: HTML:

    <div class="container">
 <div class="centered-text">
   <p>テキストを中央揃えする例</p>
 </div>
</div>

    CSS:

    .container {
 display: flex;
 align-items: center;
 height: 100vh; /* テキストを画面の高さに合わせる場合 */
}
.centered-text {
 margin: auto;
}

  3. テキストを水平および垂直に中央揃えする方法: HTML:

    <div class="container">
 <div class="centered-text">
   <p>テキストを中央揃えする例</p>
 </div>
</div>

    CSS:

    .container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh; /* テキストを画面の高さに合わせる場合 */
}
.centered-text {
 text-align: center;
 margin: auto;
}

上記のコード例は、テキストを中央揃えするためのいくつかの一般的な方法です。適用する場所や要件に応じて、適切な方法を選択してください。