CSS 整列する

CSS - display: inline-block CSS 結合セレクター

目次

  1. 要素を中心に配置
  2. 要素を中央揃えにします
  3. テキストを中央に配置
  4. 画像を中央揃え
  5. 左右の位置合わせ - 使用position
  6. 左右の配置 - float を使用します
  7. clearfix Hack
  8. 垂直方向の配置 - Padding を使用
  9. 垂直方向の配置 - line-heightを使用します
  10. 垂直方向の配置 - position と transsform を使用する
  11. 垂直方向の配置 - Flexbox の使用

要素を中心に配置

要素を水平方向と垂直方向に中央揃えにする

要素を中央揃えにします

ブロック要素 ( <div> など) を水平方向に中央揃えにするには、 margin: auto; を使用します。

要素の幅を設定すると、要素がコンテナの端まで拡張されなくなります。

要素は指定された幅を占め、残りのスペースは 2 つの余白に均等に分割されます。

この div 要素は中央に配置されます。

例

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

注: width 属性が設定されていない（または 100% に設定されている）場合、中央揃えは効果がありません。

テキストを中央に配置

要素内のテキストを中央揃えにする必要があるだけの場合は、text-align: center;:を使用します。

このテキストは中央揃えです。

例

.center {
  text-align: center;
  border: 3px solid green;
}

ヒント：テキストを配置する方法のその他の例については、CSS テキスト の章を参照してください。

画像を中央揃え

画像を中央に配置するには、左右のマージンを auto に設定し、これをブロック要素として設定します。

例

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

左右の位置合わせ - 使用position

要素を整列させる 1 つの方法は、position:Absolute; を使用することです:

この div は右揃えです。

例

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

注: 絶対的に配置された要素は通常のフローから削除され、重複する要素が発生する可能性があります。

左右の配置 - float を使用します

要素を整列させるもう 1 つの方法は、float 属性を使用することです。

例

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

注: 要素がその要素を含む要素よりも高く、フローティングされている場合、その要素はコンテナからオーバーフローします。 これを修正するにはclearfix ハックを使用できます (以下の例を参照)。

clearfix Hack

この問題は、overflow: auto; を含む要素に追加することで修正できます。

例

.clearfix {
  overflow: auto;
}

垂直方向の配置 - Padding を使用

CSS で要素を垂直方向に整列させる方法はたくさんあります。 簡単な解決策は、上下のパディングを使用することです。

垂直方向の中央揃えにしています。

例

.center {
  padding: 70px 0;
  border: 3px solid green;
}

垂直方向と水平方向の両方の配置には、padding と text-align: center; を使用します。

我是水平和垂直居中的。

例

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

垂直方向の配置 - line-heightを使用します

もう 1 つの方法は、height 属性の値と等しい value を指定して line-height 属性を使用することです。

I水平方向と垂直方向の中央に配置されます。

例

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* 複数行のテキストがある場合は、次のコードを追加してください: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

垂直方向の配置 - position と transsform を使用する

padding と line-height がオプションでない場合、別の解決策は position と transform を使用することです。属性:

I水平方向と垂直方向の中央に配置されます。

例

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

垂直方向の配置 - Flexbox の使用

フレックスボックスを使用してコンテンツを中央に配置することもできます。 flexbox は IE10 以前ではサポートされていないことに注意してください。

私は水平方向と垂直方向の中心にあります。

例

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
CSS - display: inline-block CSS 結合セレクター