縦方向の位置揃え

vertical-alignプロパティで縦方向の位置を指定

インライン要素について、行内で縦方向の位置揃えを指定する場合や、テーブルのセル内での位置揃えを指定する場合、vertical-alignプロパティを設定します。設定できる健は下衰のとおりです。また、パーセンテージや数値付きの単位も指定でき、それぞれ、親要素のベースラインからどのくらい上げるか下げるを指定します(パーセンテージの場合はline-heightプロパティの値に対する割合)。サンプルでは「text-top」と「text-bottom」を指定して、テキストの上端と下にそろえています。

テーブル内の位置揃え

テーブルの場合もセル内のテキストをセル内で左右どの位置に配置するかにtext-alignプロパティ、上下でどの位置に配置するかにvertical-alignプロパティを使用することができます。左右の位置揃えについてはtext-alignプロパティの値を使用します。上下の位置揃えについては、vertical-alignプロパティの値に、セル内での上端に配置するときは「top」、中央に配置するときは「middle」、下端に配置するときは「bottom」を指定します。

positionプロパティとtopプロパティなどを指定

各要素を自由な位置に配置するにはまず、positionプロパティをabsoluteかrelativeに設定します。positionプロパティの設定値は下衰のとおりです。さらに、topまたはbottomプロパティで上端または下端の位置を、leftまたはrightプロパティで左端または右端の位置を指定します。指定によっては重なり合う表現も可能となります。