CSSで垂直方向に文字や画像を揃える方法

2020年12月7日2021年3月31日CSS

CSSで垂直方向に文字や画像を揃える方法をみていきましょう。

簡単なようですが、baselineの考え方を理解していないと意図していない形になってしまうので、ざっと確認していきましょう。

目次から読む

CSSで垂直方向に文字や画像を揃えるには、vertical-alignプロパティを使います。

vertical-alignプロパティを使うのですが、その値を指定する際にbaselineという概念が深く関係してきます。

baselineは英字が配置される土台の線のことです。

学生の頃にアルファベットを書く授業でよくbaselineに沿って字をなぞった経験がある人も多いでしょう。

vertical-alignプロパティの値は、baselineがデフォルトになっています。

その値をtop,bottom,middleと変更することで、垂直方向に文字や画像を揃えることができます。

img {
   vertical-align: bottom; 
}

またvertical-alignプロパティの値に、2px,-2pxなど数字を指定することで、baselineからどれだけ離すかを指定することができます。

<body>
  <h1>CSSの練習</h1>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</body>

p {
  font-size: 16px;
（  line-height: 48px;）
  （もしくは　line-height: 3em;）
  もしくは　line-height: 3;
  background-color: pink;
}

Posted by devsakaso