CSS-垂直配置

説明

_vertical-align_プロパティは、行内または表のセル内のテキストの配置を決定します。

可能な値

baseline -要素のベースラインは、親要素のベースラインに揃えられます。
sub -要素のベースラインは、添え字付きテキストに適したポイントまで下げられます。
super -要素のベースラインは、上付きテキストに適したポイントまで上げられます。
top -要素のボックスの上部は、インラインコンテンツのコンテキストでは行ボックスの上部に、テーブルのコンテキストではテーブルセルの上部に揃えられます。
text-top -要素のボックスの上部は、行の最も高いインラインボックスの上部に揃えられます。
中-要素のベースラインは、インラインコンテンツのコンテキストで、親要素のベースラインに親要素のフォントのx-heightの半分を加えたもので定義されたポイントに揃えられます。
bottom -要素のボックスの下部は、インラインコンテンツのコンテキストでは行ボックスの下部に、テーブルのコンテキストではテーブルセルの下部に揃えられます。
text-bottom -要素のボックスの下部は、行内の最も低いインラインボックスの下部に揃えられます。
percentage -要素のベースラインは、プロパティline-heightの値の指定された割合だけ上下します。
長さ-要素のベースラインは、指定された長さの値だけ上下します。このプロパティでは、負の長さの値が許可されています。このプロパティの長さの値0は、値のベースラインと同じ効果があります。

に適用されます

インラインレベルの要素と、table-cellが表示される要素。

DOM構文

object.style.verticalAlign = "baseline";

例

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <table style = "height:200px; width:400px;border:1px solid red;">
         <tr>
            <td style = "vertical-align:bottom;" >
               <p>This will be aligned to bottom of the cell.</p>
            </td>
         </tr>
      </table>
   </body>
</html>

これにより、次の結果が生成されます–

Css-vertical-align

目次

CSS-垂直配置

説明

可能な値

に適用されます

DOM構文

例