MENU
  1. ホーム
  2. CSS
  3. text-alightプロパティ

text-alightプロパティ

CSS
2023.07.30

text-alightは、行の文字位置をどのように揃えるかを指定するプロパティになります。

text-alightの説明図
プロパティ名簡易説明
left / start左に揃える
right / end右に揃える
center中央に揃える
justify両端に揃える(英文字のみ)
match-parent親要素と同じにする
text-alightプロパティ
記法

text-alight : プロパティ値

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>text-alightプロパティ</title>
  </head>

  <body class="body">
    <!-- text-alight:left -------------------------- -->
    <label>text-alight:left</label>
    <p class="left">左に揃える</p>

    <!-- text-alight:start ------------------------- -->
    <label>text-alight:start</label>
    <p class="start">左に揃える</p>

    <!-- text-alight:right ------------------------- -->
    <label>text-alight:right</label>
    <p class="right">右に揃える</p>

    <!-- text-alight:end --------------------------- -->
    <label>text-alight:end</label>
    <p class="end">右に揃える</p>

    <!-- text-alight:center ------------------------ -->
    <label>text-alight:center</label>
    <p class="center">中央に揃える</p>

    <!-- text-alight:justify ----------------------- -->
    <label>text-alight:justify[英語](両端に揃える)</label>
    <p class="justify">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>

    <label>
      text-alight:justify[日本語](両端に揃える)<br>
      ※日本語には効果がない
    </label>
    <p class="justify">
      吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
    </p>

    <!-- text-alight:match-parent ------------------ -->
    <label>
      text-alight:match-parent<br>
      ※親要素(text-alight:end)
    </label>
    <div class="end">
      <p class="match-parent">右に揃える</p>
    </div>

    <label>
      text-alight:match-parent<br>
      ※親要素(text-alight:center)
    </label>
    <div class="center">
      <p class="match-parent">中央に揃える</p>
    </div>
  </body>
</html>
p {
  background-color: #EBEAEB; /* 表示エリアの背景 */
  width: 300px; /* 文字表示エリア */
}
.left {
  text-align: left;
}
.start {
  text-align: start;
}
.right {
  text-align: right;
}
.end {
  text-align: end;
}
.center {
  text-align: center;
}
.justify {
  text-align: justify;
}
.match-parent {
  text-align: match-parent;
}
出力結果

左に揃える

左に揃える

右に揃える

右に揃える

中央に揃える

Lorem ipsum dolor sit amet consectetur adipisicing elit.

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

右に揃える

中央に揃える

CSS