HTML の インライン要素 インラインブロック要素 を 画面(親要素)の中央 に 表示する

目的

• HTMLファイルのブロック要素を画面(親要素)の左右の中央に配置する設定するをまとめる

押さえるポイント

• インライン要素・インラインブロック要素の配置位置を指定するにはtext-alineプロパティを使用する。
• 要素の位置は中央の他に左側、右側も指定できる。
• 要素の位置はcenter(中央)、left(左側)、right(右側)で指定する。
  ※ブロック要素を中央に配置する設定はこちらに記載しています。

書き方の例

• 下記にCSSファイルの内容を記載する。

要素の名前かクラス名 {
  text-aline: 要素の配置場所の指定;
}

より具体的な例

• a要素の位置を画面左右中央に配置する。
• input要素の位置を画面左側に配置する。
• textarea要素の位置を画面右側に配置する。
• 下記にHTMLファイルの内容を記載する。

<a>Googleへ</a>
<input>
<textarea></textaria>

• 下記にCSSファイルの内容を記載する。

*/ 中央配置 /*
a {
  text-aline: center;
}

*/ 左側配置 /*
input {
  text-aline: left;
}

*/ 右側配置 /*
textaria {
  text-aline: right;
}