(88) 複数行テキストの中寄せ

投稿者: | 2020年5月19日

1. やりたいこと

DIV矩形内に配置した複数行のテキストを、縦方向の中断に寄せたい。

2. やってみる

1) 縦方向中寄せ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>

<style>
.v_mid{
  /* 中寄せの指定 */
  position: absolute;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);

  /* 以下、不要な装飾 */
  font-size: 20pt;
  color: #00f;
}
</style>

</head>
<body>

<div style="position:relative; height: 500px; border: solid 5px #000">
<p class="v_mid">
あいうえお<br />
かきくけこ<br />
さしすせそ
</p>
</div>

</body>
</html>

解説

・10行目~13行目 : 縦方向中断寄せのための設定

2) 横方向中寄せ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>

<style>
.h_mid{
  /* 中寄せの指定 */
  position: absolute;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);

  /* 以下、不要な装飾 */
  font-size: 20pt;
  color: #00f;
}
</style>

</head>
<body>

<div style="position:relative; height: 500px; border: solid 5px #000">
<p class="h_mid">
あいうえお<br />
かきくけこ<br />
さしすせそ
</p>
</div>

</body>
</html>

解説

・10行目~13行目 : 横方向中断寄せのための設定

3) 縦方向&横方向中寄せ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>

<style>
.vh_mid{
  /* 中寄せの指定 */
  position: absolute;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

  /* 以下、不要な装飾 */
  font-size: 20pt;
  color: #00f;
}
</style>

</head>
<body>

<div style="position:relative; height: 500px; border: solid 5px #000">
<p class="vh_mid">
あいうえお<br />
かきくけこ<br />
さしすせそ
</p>
</div>

</body>
</html>

解説

・10行目~14行目 : 横方向中断寄せのための設定
・14行目は以下のようにまとめて書くことも出来る。

  transform: translate3d(-50%, -50%, 0);

4) 縦方向&横方向中寄せ (画像でも)

当然だが、表示物がテキストでなく画像でも使える。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00088 demo1</title>

<style>
.vh_mid{
  /* 中寄せの指定 */
  position: absolute;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>

</head>
<body>

<div style="position:relative; height: 500px; border: solid 5px #000">
<img class="vh_mid" src="./svgimg1.svg" style="width: 30%;" />
</div>

</body>
</html>

3. 所感

・このコードはちょくちょく使うことになりそうだなぁ…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)